Перенесите первый уровень <li> s, а не вложенный <li> s

У меня есть следующий HTML:

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

С jQuery, как настроить таргетинг на FIRST-уровень <li> s?

Например, мне нужно сделать шрифт полужирным при наведении на <li> с буквами A, B и C, но НЕ использовать этот стиль шрифта для вложенных <li> (с подразделами имен).

Здесь вы можете использовать начальный jsfiddle DEMO, если вы хотите его использовать.

Спасибо.

ИЗМЕНИТЬ -

Решение:

РЕБЕНКИ SELECTORS, что ответ.

Не нужно jQuery, это можно сделать с помощью CSS.

Здесь обновленный DEMO

EDIT - Здесь более четкая демонстрация

Спасибо,

Ответ 1

У вас есть контейнер <div> с классом и используйте селектор >. Допустим, что ваш класс div контейнера является "myclass":

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

Примечание. Селектор > не работает в IE6 и ниже при использовании в качестве селектора CSS. Он работает во всех других браузерах, включая IE7 и IE8, а при использовании в JQuery он работает во всех браузерах, поддерживаемых jQuery, включая IE6.

Ответ 2

Вы можете сделать это:

$('ul > li:not(:has(ul))');

Но лучше было бы присвоить свой идентификатор верхнего уровня <ul>, чтобы вы могли настроить его с помощью допустимого селектора CSS:

$('#topUL > li')

Ответ 3

РЕБЕНКИ SELECTORS, что ответ.

Не нужно jQuery, это можно сделать с помощью CSS. Настройте элементы li первого уровня с помощью селектора:

ul > li {
    font-weight: bold;
}

И затем отмените стиль для более глубоких li элементов:

ul > li li {
    font-weight: normal;
}

Здесь обновлен DEMO.

Ответ 4

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

li{font-weight:bold;}
ul ul li{font-weight:normal;}

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

Ответ 5

Я не думаю, что ваша проблема была полностью решена (хотя были некоторые хорошие попытки). Ваша примерная проблема связана с применением стиля к родительскому объекту и предотвращением наследования у ребенка стиля, что является проблемой CSS.

Вы можете настроить таргетинг на элементы списка, зная родительский элемент (как отмечали некоторые). Затем добавьте класс при наведении.

$('div > ul > li').hover(function(){
    $(this).addClass('myHover');
},
function(){
    $(this).removeClass('myHover');
});

И ваш CSS будет иметь класс для родителя и стиль отрицания для детей:

.myHover { font-weight: bold; }
.myHover li { font-weight: normal; }