jQuery: UL выбирает родителя li, у которого есть только дети

Question

Это потрясает весь день, как я могу получить свое утверждение jQuery ниже, чтобы выбрать только родителей <li>, у которых есть дети?

Проще говоря, мне нужно добавить класс css к <li> пунктам 6, 4 и 8, потому что у них есть дети непосредственно под ними. Мое утверждение заходит слишком глубоко, оно добавляет класс redColor к 7, 10, 9, 11, 12 li.

$(document).ready(function () {
   $("#test-list li:has(ul)").addClass("redColor");
 });

---

<ul id="test-list">
 <li id="listItem_1"> <strong>Item 1</strong> </li>
 <li id="listItem_2"> <strong>Item 2</strong> </li>
 <li id="listItem_3"> <strong>Item 3</strong> </li>
 <li id="listItem_5"> <strong>Item 5</strong> </li>
 <li id="listItem_6"> <strong>Item 6</strong>
    <ul>
        <li id="listItem_4"> <strong>Item 4</strong>
            <ul>
                <li id="listItem_7"> <strong>Item 7</strong> </li>
                <li id="listItem_10"> <strong>Item 10</strong> </li>
            </ul>
        </li>
    </ul>
 </li>
 <li id="listItem_8"> <strong>Item 8</strong>
    <ul>
        <li id="listItem_9"> <strong>Item 9</strong> </li>
        <li id="listItem_11"> <strong>Item 11</strong> </li>
        <li id="listItem_12"> <strong>Item 12</strong> </li>
    </ul>
 </li>
</ul>

Посмотреть также на jfiddle: http://jsfiddle.net/t6a6G/9/

Заранее спасибо!

Answer 1

Если вы посмотрите внимательно, вы увидите, что ваш селектор jQuery на самом деле работает правильно, и только у li, 6, 4 и 8 есть класс, который вы добавляете.

Причина, по которой другие пользователи становятся красными, заключается в том, что цвет по умолчанию - inherit, того же цвета, что и ваш родитель. Так что установка li для color: red также делает его потомков красными, если только к ним не применяется другой стиль.

Добавление стиля, подобного li { color: black; }, сделает более очевидным, что ваш класс действительно применяется только к правильным элементам списка.

Answer 2

Ваш селектор просто в порядке.Он правильно добавляет класс redColor, но дети наследуют цвет своих родителей, поэтому они также становятся красными.

Вы должны изменить это поведение, явно указав цвет <li> s, которыйкласс redColor:

li {
    color:black;
}

См. исправленную скрипку: http://jsfiddle.net/t6a6G/12/.

Answer 3

Вместо того, чтобы ставить пробелы между двумя вещами в CSS, используйте ">". Таким образом, «A> B» означает, что B является прямым потомком A. Кроме того, вы добавили класс redColor ко всему в li, и это также включает ul внутри li. Я думаю, вы просто хотели, чтобы сильные метки были красными.

$(document).ready(function() {
// Trying to add css class to li who are parents of children
// When working correctly only items 6, 4, and 8 would be red
    $("#test-list > li:has(ul) > strong").addClass("redColor");
});