JQuery селектор не логично - PullRequest
3 голосов
/ 11 января 2012

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

Мой HTML:

<div id="myList">
    <ul>
        <li>something 1</li>
        <li>something 2</li>
        <li>something 3</li>
        <li>something 4
            <ul>
                <li>sub something 1</li>
                <li>sub something 2</li>
                <li>sub something 3</li>
            </ul>
        </li>
    </ul>
</div>

Моя проблема заключается в следующем:

$('#myList ul:first li:first').addClass('cool')

Это добавляет класс к тегу li что-то 1. Все хорошо. Но:

$('#myList ul:first li:last').addClass('cool')

Вместо добавления класса к тегу li что-то 4, он добавляет его к тегу li что-то 3

Почему?

Ответы [ 2 ]

6 голосов
/ 11 января 2012

Вы выбираете все теги li вниз по дереву.

Возможно, вы захотите попробовать это:

$('#myList ul:first>li:last').addClass('cool')

Таким образом, вы выбираете только прямые дочерние узлы предыдущего узла.

3 голосов
/ 11 января 2012

li:last обрабатывается слева направо. Сначала выбираются все элементы li, которые являются потомками ul. Поскольку вы используете селектор потомков , а не дочерний селектор, этот включает все элементы "sub" li. :last затем выбирает последний из них для отображения в документе, а это sub something 3.

Вместо этого следует использовать дочерний селектор :

$('#myList ul:first > li:last').addClass('cool')
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...