Блог

Главная - Вопросы по программированию - jQuery распознает div как элемент списка

jQuery распознает div как элемент списка

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я знаю, что вы не должны помещать divs в неупорядоченный список, но допустим, у нас есть разметка, указанная ниже. с помощью jQuery я хотел бы настроить таргетинг на каждый 3-й элемент списка: li: n-й дочерний элемент (3n). Похоже, что jQuery также считает div внутри как элемент списка, хотя мы указываем li:eq(3n) . Как мы можем обнаружить каждый 3-й элемент списка независимо от того, что еще находится внутри родительского элемента. какой смысл даже писать li: eq (3n), когда ‘li’ игнорируется?

HTML:

 <ul class="hello">
    <div class="someDiv">a</div>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <div class="divider">b</div>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

jQuery:

 $("ul.hello li:nth-child(3n)").css('color','red');

скрипка

Комментарии:

1. Это не должно иметь значения, так как у вас все равно не может быть такой разметки.

2. Хотя разметка была недопустимой, технически полученный вами результат верен. Это выбор «элемента списка», то есть «n-го дочернего элемента» (включая всех братьев и сестер). n-й тип — это то, что вы хотели.

3. <div> in <ul> недопустимый HTML.

4. @TrueBlueAussie — на самом деле это не так, это ужасный ответ, поскольку вам вообще не нужно использовать nth-of-type , единственным допустимым дочерним элементом UL является LI , и неизвестно, что браузер делает с такой недопустимой разметкой. И дело не в «предполагаемом», каждый известный человеку стандарт HTML гласит, что у вас просто не может быть ничего, кроме элемента LI внутри UL.

5. @adeneo: мой «комментарий» чисто объяснил, почему он получил такой результат. Я квалифицировал его как недопустимый HTML. Если бы я имел в виду это как ответ, это был бы ответ 🙂

Ответ №1:

Используйте nth-of-type(3n) так :

 $("ul.hello li:nth-of-type(3n)").css('color','red');

например, число n-го типа (3n 2) — 3 представляет размер цикла, n — счетчик, а 2 — время начала

ДЕМОНСТРАЦИЯ: http://jsfiddle.net/N565K/2 /