Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как выбрать li элементы из первого уровня меню (https://javascript.ru/forum/misc/13116-kak-vybrat-li-ehlementy-iz-pervogo-urovnya-menyu.html)

TicTac 16.11.2010 03:03

Как выбрать li элементы из первого уровня меню
 
Есть такое меню

<ul id="menu">
		<li><a href="#">Милан</a>
			<ul class="submenu">
				<li><a href="#">Пато</a></li>
				<li><a href="#">Пирло</a></li>
				<li><a href="#">Ибрагимович</a></li>
			</ul>
		</li>
		<li><a href="#">Арсенал</a>
			<ul>
				<li><a href="#">Фабрегас</a></li>
				<li><a href="#">Уолкот</a></li>
				<li><a href="#">Росицки</a></li>
				<li><a href="#">Фабиански</a></li>
			</ul>
		</li>
</ul>


как из него выбрать только li элементы первого уровня, если использовать getElementsByTagName('li') выбирает все, а мне нужны только два li <li>..Милан..</li> и <li>..Арсенал..</li>.

А если через childNodes набирает лишние

Код можно не писать, просто помочь морально - идеей.

рони 16.11.2010 07:18

размышление на тему )))
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#menu li a').next().css('display', 'none');
$('#menu li a').bind("click", function () {
    $(this).next().toggle();})
 })
</script>
 <ul id="menu">
		<li><a href="#">Милан</a>
			<ul class="submenu">
				<li><a href="#">Пато</a></li>
				<li><a href="#">Пирло</a></li>
				<li><a href="#">Ибрагимович</a></li>
			</ul>
		</li>
		<li><a href="#">Арсенал</a>
			<ul class="submenu">
				<li><a href="#">Фабрегас</a></li>
				<li><a href="#">Уолкот</a></li>
				<li><a href="#">Росицки</a></li>
				<li><a href="#">Фабиански</a></li>
			</ul>
		</li>
</ul>

ksa 16.11.2010 08:37

Цитата:

Сообщение от TicTac
getElementsByTagName('li') выбирает все, а мне нужны только два li <li>..Милан..</li> и <li>..Арсенал..</li>.

Т.е. саму разметку ты менять не можешь? Например добавить

name='firstLi'

TicTac 16.11.2010 09:09

рони, а без jquery нельзя сделать или глупо?

ksa, все верно, не хотелось бы завязывать id и по ним работать хотелось бы универсальное чтобы само определяло. Ну и на javascript only.

ksa 16.11.2010 09:16

Цитата:

Сообщение от TicTac
хотелось бы универсальное чтобы само определяло

Таки дай "верхним"
name='firstLi'


<ul id="menu">
		<li name='firstLi'><a href="#">Милан</a>
			<ul class="submenu">
				<li><a href="#">Пато</a></li>
				<li><a href="#">Пирло</a></li>
				<li><a href="#">Ибрагимович</a></li>
			</ul>
		</li>
		<li name='firstLi'><a href="#">Арсенал</a>
			<ul>
				<li><a href="#">Фабрегас</a></li>
				<li><a href="#">Уолкот</a></li>
				<li><a href="#">Росицки</a></li>
				<li><a href="#">Фабиански</a></li>
			</ul>
		</li>
</ul>

и потом пользуйся
document.getElementsByTagName('li').getElementsByName('firstLi')

Цитата:

Сообщение от TicTac
Ну и на javascript only.

Дык онлиней некуда... :)

рони 16.11.2010 12:59

Цитата:

Сообщение от TicTac
Ну и на javascript only

:) для меню любой вложенности
<ul id="menu">
		<li><a href="#">Милан</a>
			<ul >
				<li><a href="#">Пато</a></li>
				<li><a href="#">Пирло</a></li>
				<li><a href="#">Ибрагимович</a></li>
			</ul>
		</li>
		<li><a href="#">Арсенал</a>
			<ul >

				<li><a href="#">Фабрегас</a></li>
				<li><a href="#">Уолкот</a></li>
				<li><a href="#">Росицки</a></li>
				<li><a href="#">Фабиански</a></li>
                <li><a href="#">Второй состав</a>
            <ul >
				<li><a href="#">Первый</a></li>
				<li><a href="#">Второй</a></li>
				<li><a href="#">Третий</a></li>
                <li><a href="#">Запасные</a>
            <ul >
				<li><a href="#">Нападающий</a></li>
				<li><a href="#">Защитник</a></li>
				<li><a href="#">Вратарь</a></li>
			</ul>
                </li>
			</ul>
                </li>
			</ul>
		</li>
</ul>
<script type="text/javascript">
for (var menu = document.getElementById("menu"),
 uls = menu.getElementsByTagName("ul"), i = 0; i < uls.length; i++) {
    uls[i].style.display = "none";
    var a = uls[i].parentNode.getElementsByTagName("a")[0];
    a.style.backgroundColor = "#00FF7F";
    a.onclick = function (b) {
        return function () {
            uls[b].style.display = uls[b].style.display ? "" : "none";
            var ulss= uls[b].getElementsByTagName('ul')
            for (var k=0; k<ulss.length; k++)  {
            ulss[k].style.display='none'
            }
            return false
        }
    }(i)
};
</script>

TicTac 16.11.2010 15:09

ksa,забыл про нейм, нужнос попробовать, сасиб

рони, ухты, будем вечером что делать разобраться как это работает..

m0nya 30.04.2013 10:55

$("ul.rootlist > li a")....
http://stackoverflow.com/questions/9...ents-in-jquery

zilker 30.04.2013 13:05

document.querySelectorAll('#menu > li');

nikita.mmf 02.05.2013 21:05

function getChildren( parent, tag ) {
  var children = [];
  if ( tag ) tag = tag.toLowerCase();
  if ( typeof parent === "string" ) {
    parent = document.getElementById( parent );
  }
  for ( var child = parent && parent.firstChild; child; child = child.nextSibling ) {
    if ( child.nodeType === 1 && (!tag || child.nodeName.toLowerCase() === tag ) children.push( child );
  }
  return children;
}


getChildren( "menu", "li" )


Часовой пояс GMT +3, время: 15:35.