Js/jquery

  1. Weblancer
  2. Форум фрилансеров
  3. Программирование
Руслан Савенок
530 сообщений
#15 лет назад
Есть огромный список ul, вопрос: как выбрать только первый li первого уровня?
Сергей Шпак
596 сообщений
#15 лет назад


<ul id="listBox">

	<li>1</li>

	<li>2</li>

	<li>3</li>		

</ul>


<script>


var ul = document.getElementById("listBox"); 

var list = ul.getElementsByTagName("li");


alert(list.innerHTML); // должно выдать внутренность первого "li"

// list - есть первый елемент списка


</script>


... где-то как-то так

зы: забудьте о jquery, учите DOM и js.
Себастьян Ф.
584 сообщения
#15 лет назад


<!DOCTYPE html>

<html>

<head>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>

<body>

<ul id="listBox">

   <li>1. Target</li>

   <li>2. Next ul

      <ul id="listBox">

         <li>1. Sub li</li>

         <li>2. Sub li</li>

         <li>3. Sub li</li>

      </ul>

   </li>

   <li>3. Other</li>

</ul>

<script>$("ul:first li:first").animate({fontSize: "70px"}, 1500 );</script>

</body>

</html>


А про то, куда лучше тратить свободное время, -Caesar- прав
Руслан Савенок
530 сообщений
#15 лет назад
    <ul id="topnav">

      <li class="first"><a href="#">Главная</a></li>

      <li>

       <a href="#">Продукты</a>

       <div class="sub">

          	<ul>

                	<li><h2><a href="#">Desktop</a></h2></li>

                	<li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                	<li><h2><a href="#">Laptop</a></h2></li>

                	<li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>


                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                	<li><h2><a href="#">Accessories</a></h2></li>

                	<li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>


                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                	<li><h2><a href="#">Accessories</a></h2></li>

                	<li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                          	<ul>

                	<li><h2><a href="#">Desktop</a></h2></li>

                	<li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                	<li><h2><a href="#">Laptop</a></h2></li>

                	<li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>


                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                	<li><h2><a href="#">Accessories</a></h2></li>

                	<li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>


                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

       </div>

      </li>

      <li><a href="#">Главная</a></li>

      <li><a href="#">Главная</a></li>

      <li class="last"><a href="#">Главная</a></li>

     </ul>



И смотрите что оно вам отдаст

В DOM довольно не плохо разбираюсь, но эта задача мне непонятна
Сергей Шпак
596 сообщений
#15 лет назад
<ul id="topnav">

      <li class="first"><a href="#">Главная</a></li>

      <li>

       <a href="#">Продукты</a>

       <div class="sub">

             <ul>

                   <li><h2><a href="#">Desktop</a></h2></li>

                   <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                   <li><h2><a href="#">Laptop</a></h2></li>

                   <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>


                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                   <li><h2><a href="#">Accessories</a></h2></li>

                   <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>


                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                   <li><h2><a href="#">Accessories</a></h2></li>

                   <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                             <ul>

                   <li><h2><a href="#">Desktop</a></h2></li>

                   <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                   <li><h2><a href="#">Laptop</a></h2></li>

                   <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>


                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

                <ul>

                   <li><h2><a href="#">Accessories</a></h2></li>

                   <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>


                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

       </div>

      </li>

      <li><a href="#">Главная</a></li>

      <li><a href="#">Главная</a></li>

      <li class="last"><a href="#">Главная</a></li>

     </ul>


<script>


var ul = document.getElementById("topnav"); 

var list = ul.getElementsByTagName("li");


alert(list.innerHTML); // выдает : <a href="#">Главная</a>


</script>

насколько понимаю то что и требовалось в изначальной постановке вопроса ...
Руслан Савенок
530 сообщений
#15 лет назад
Цитата ("-Caesar-"):
насколько понимаю то что и требовалось в изначальной постановке вопроса ...

Нужно получить все li первого уровня, т.е.

* Главная
* Продукты
* Главная
* Главная
* Главная
Антон Е.
279 сообщений
#15 лет назад
Ну так вам дали нужный код
length
var ul = document.getElementById("topnav");

var list = ul.getElementsByTagName("li");


alert(list.innerHTML); // выдает : <a href="#">Главная</a>

просто нужно пройтись циклом например как-то так,не проверял будет ли работать


var ul = document.getElementById("topnav");

var list = ul.getElementsByTagName("li");

for(var i = 0; i < list.lenght; i++)

{

alert(list.innerHTML); 

}
Роман В.
99 сообщений
#15 лет назад
_VersouL_, не всё так просто, Вы код запускали? Оно ведь вернет все элементы li и вложенные тоже.
Руслан Савенок
530 сообщений
#15 лет назад
Цитата ("_VersouL_"):
просто нужно пройтись циклом например как-то так,не проверял будет ли работатьВот именно, такой цикл это то же самое что выбрать $('topnav li'

было бы все так просто я бы сообразил)
Роман В.
99 сообщений
#15 лет назад
На жоквеи примерно так: 
$('#topnav > li > a').each(function (){$(this).animate({fontSize: "25px"}, 1500 );})



Кто расскажет как на нативе выбрать красиво?
Руслан Савенок
530 сообщений
#15 лет назад
Цитата ("r0b1n"):
Кто расскажет как на нативе выбрать красиво?

А они в блоке sub их просто выбрать =) Спасибо, за решение
Себастьян Ф.
584 сообщения
#15 лет назад


Нужно получить все li первого уровня, т.е.


* Главная

* Продукты

* Главная

* Главная

* Главная


так бы сразу и написали :)

<ul id="topnav">

      <li class="first"><a href="#">Главная</a></li>

      <li>

      <a href="#">Продукты</a>

       <div class="sub">

             <ul>

                   <li><h2><a href="#">Desktop</a></h2></li>

                   <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                    <li><a href="#">Navigation Link</a></li>

                </ul>

       </div>

      </li>

      <li><a href="#">Главная 2</a></li>

      <li><a href="#">Главная 3</a></li>

      <li class="last"><a href="#">Главная 4</a></li>

</ul>


<script>

var ul = document.getElementById("topnav")

var list = ul.getElementsByTagName("li");

for (var i=0; i<list.length; i++)

    if (list.parentNode==ul)

        alert(list.childNodes.nodeName +' - '+list.childNodes.innerHTML);

</script>


учтите только что броузеры навроде ФФ или Оперы, пустую строку тоже считают ребенком..
Руслан Савенок
530 сообщений
#15 лет назад
Цитата ("SField"):
учтите только что броузеры навроде ФФ или Оперы, пустую строку тоже считают ребенком..

Смотрите что мне отвечает фф на ваш код

A - Главная
#text - undefined
A - Главная
A - Главная
A - Главная
Евгений О.
2989 сообщений
#15 лет назад
var ul = document.getElementById("topnav");

for (i = 0; i < ul.children.length; i++) {

    ul.children.....

}

И все дела .
Себастьян Ф.
584 сообщения
#15 лет назад
Цитата ("zombieman"):
Цитата ("SField"):
учтите только что броузеры навроде ФФ или Оперы, пустую строку тоже считают ребенком..

Смотрите что мне отвечает фф на ваш код

A - Главная
#text - undefined
A - Главная
A - Главная
A - Главная


все правильно он отвечает. замените у родителя 100500 главных на нормальные названия, и прочитайте что я Вам написал.