Целевой первый уровень <li>с, а не вложенный <li>с - PullRequest
Новая
       12

Целевой первый уровень <li>с, а не вложенный <li>с

52 голосов
/ 28 января 2011

У меня есть следующий 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 как настроить таргетинг на ПЕРВЫЙ уровень <li> s?

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

Вот начальное jsfiddle DEMO , если вы хотите его использовать.

Спасибо.

EDIT -

Решение:

ВЫБОР РЕБЕНКА , вот ответ.

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

Вот обновленная ДЕМО

РЕДАКТИРОВАТЬ - Вот более понятная демонстрация

Спасибо,

Ответы [ 5 ]

98 голосов
/ 28 января 2011

Иметь контейнер <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.

18 голосов
/ 28 января 2011

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

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

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

$('#topUL > li')
9 голосов
/ 28 января 2011

ВЫБОР РЕБЕНКА , вот ответ.

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

ul > li {
    font-weight: bold;
}

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

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

Вот обновленный DEMO .

2 голосов
/ 28 января 2011

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

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

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

1 голос
/ 28 января 2011

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

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

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

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

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