Что будет делать $ ("li", "li.item-ii" )?

#jquery #jquery-selectors

#jquery #jquery-селекторы

Вопрос:

Это может быть вопрос новичка, будет ли $ ( «li», «li.item-ii» ) выбирать все li и li.item-ii внутри » или выбирать только li, которые являются потомками li.item-ii?

     <body>
       <ul class="level-1">
       <li class="item-i">Iamp;< /liamp;></li>

       <li class="item-ii">II

        <ul class="level-2">
        <li class="item-a">A</li>

         <li class="item-b">B

        <ul class="level-3">
         <li class="item-1">1</li>

         <li class="item-2">2</li>

         <li class="item-3">3</li>
       </ul>
        </li>

      <li class="item-c">C</li>
      </ul>
      </li>

     <li class="item-iii">III</li>
     </ul>
      </body>

1. Почему бы вам не попробовать и не рассказать нам ?

2. Вторым ожидаемым аргументом будет контекст, однако вы должны предоставить его в виде одной строки.

3. $ === jQuery Документ для jQuery функции находится здесь: api.jquery.com/jquery Пожалуйста, ознакомьтесь с документацией, чтобы узнать, как работает API.

4. разве синтаксис выбора контекста и множественного выбора не одинаков? будет ли $(‘item1’, ‘item2’) отбирать все item1 и item2 ИЛИ он выберет item1, которые являются потомками item2?

5. Документация для множественного выбора находится здесь: api.jquery.com/multiple-selector Документация для этой jQuery функции приведена в моем комментарии выше. Прочитайте их, чтобы узнать разницу.

Ответ №1:

Прежде всего, вы можете исключить имена классов в каждом LI, потому что вы можете ссылаться на непосредственные дочерние элементы LI элемента UL. Например:

 var $cLi1 = $("ul.level-1 > li") //returns collection of the UL element's immediate LI children

Вам даже не нужны имена классов для элементов UL и LI 2-го уровня, потому что вы можете использовать синтаксис CSS для ссылки на них. Например:

 //2nd level
var $cLi2 = $("ul.level-1 > li > ul > li") //returns collection of LI elements in 2nd level UL elements

//3rd level
var $cLi3 = $("ul.level-1 > li > ul > li > ul > li")

//if you want to find elements within a jQuery object, both of these work the same:
var $ul1 = $("ul.level-1");
var $cLi1 = $ul1.find("> li")
//or
var $cLi1 = $("> li", $ul1);

Для получения подробной справки о селекторах jQuery посетите: http://api.jquery.com/category/selectors /

Ответ №2:

Второй аргумент называется контекстом . Это то же самое, что $('li.item-ii').find('li')

Ответ №3:

Да, вы правы, это называется ограниченным поиском $( "li", "li.item-ii" ) ;

это означает, что он найдет все теги li, которые находятся внутри li.item-ii .

если на вашей странице слишком много html, то это поможет повысить производительность.

Другой метод:

$("li.item-ii").find("li") .

этот метод также дает тот же результат, что и $( "li", "li.item-ii" )

1. но разве $(item1,item2) не используется для выбора элементов 1 и 2, а не всех элементов 1 внутри элемента 2?

2. для множественного выбора $("li,li.item-ii") используется

3. @PradeepSaini Чтобы уточнить: второй аргумент $() функции jQuery является контекстным аргументом для поиска, см.: api.jquery.com/jQuery/#jQuery1

Ответ №4:

Он вернет только все li под li с class=»item-ii»

И если вы хотите получить доступ ко всем li, вы должны попробовать:-

 $( "li" );

Ответ №5:

$( "li", "li.item-ii" ) — этот селектор jQuery указывает на два разных элемента.

Сначала $("li") выбирает все li (ы) в предоставленном html.
Второй $("li.item-ii") — выбирает все вторые li и дочерние элементы.

Теперь, если они используются вместе, $("li", "li.item-ii") селектор выберет все li (ы) в предоставленный html.

Итак, это все. Надеюсь, это вам очень поможет! Приветствия!