Как стилизовать элементы верхнего уровня вложенного списка

Question

Учитывая следующую неупорядоченную структуру вложенного списка:

<ul id="nestedList">
    <li>
        Item A
        <ul>
            <li>Item A Descrip</li>
        </ul>
    </li>
    <li>
        Item B
        <ul>
            <li>Item B Descrip</li>
        </ul>
    </li>
    <li>
        Item C
        <ul>
            <li>Item C Descrip</li>
        </ul>
    </li>
</ul>

Какой селектор jQuery мне нужно использовать для стилизации только элементов li верхнего уровня (Элемент A, Элемент B и т. Д.), А не элементов li "Descrip"?

Я пытался работать с селектором.children(), который, как сказано в документации jQuery, выбирает только непосредственные дочерние элементы выбранного элемента, но все, что я пробовал, либо стилизовало весь список, либо только элементы li второго уровня.

Вот jQuery, с которым я работал:

$('#nestedList').children().css('font-weight', 'bold');

а также:

$('ul#nestedList').children().css('font-weight', 'bold');

ОБНОВЛЕНИЕ Я создал jsFiddle для этого, так что не стесняйтесь возиться с этим...

Answer 1

"но все, что я пробовал, либо стилизовало весь список"

Это потому, что ваши стили, размещенные на верхнем уровне, наследуются от стилей верхнего уровня.

Вам нужно переопределить эти стили во вложенных списках.

$('#nestedList').children().css('font-weight', 'bold')
                .find('li').css('font-weight','normal');

Рабочий пример: http://jsfiddle.net/w66rK/

Answer 2

Попробуй это

$('#nestedList > li').css('font-weight', 'bold');

Answer 3

Использовать прямой CSS было бы проще:

#nestedList > li {
    /* direct li descendants of the parent ul */
    /* CSS */
}

Этот же селектор, конечно же, работает с jQuery:

$('#nestedList > li').css('color','red'); // etc...

Answer 4

$('#nestedList > li') 

http://api.jquery.com/child-selector/