Как выбрать только <li> с <ul>?

Question

Как выбрать только <li> с <ul>?

0

У меня есть <li> который содержит другие <ul> и <li>.

Я хочу иметь доступ к <li> и применять различные функции для каждого.

Я собираюсь с подходом:

Пример A:

Если этот <li> содержит <ul>, сделайте это, нажав <li>.

Пример B:

Если этот <li> не содержит <ul>, сделайте это, нажав <li>.

Однако он не работает, поэтому я пытаюсь проверить основы.

Пример A, как представляется, выбирает обе <li> ', даже вложенную, которая не содержит <ul>.

HTML

<ul>
<li>i do have a ul - i should be green
<ul>
<li>i dont have a ul - i should be red</li>            
</ul>
</li>
<li>i dont have a ul - i should be red</li>
<li>i dont have a ul - i should be red</li>
</ul>

JQuery

// why does this first condition cause both li to be green?

$("li:has(ul)").css('background','Green');

// uncomment the following and only one is green

//$("li:not(:has(ul))").css('background','Red');

jsFiddle

http://jsfiddle.net/rwone/H5ZdE/2/

Редактировать:

Чтобы уточнить, я хочу быть особенно избирательным, чтобы я мог применять различные функции щелчков для каждого <li>, поэтому мне нужно выяснить, как правильно их выбирать, а не просто полагаться на "переопределение" унаследованных стилей и т.д.,

user1063287 16 дек. 2013, в 05:25

Источник

0

Это не выбор обоих. <ul> находится в <li> , поэтому он также получает зеленый фон.
Blender 16 дек. 2013, в 04:08
0

потому что дочерний li наследует цвет фона от элемента предка
Arun P Johny 16 дек. 2013, в 04:09
0

Есть ли способ специально выбрать каждый <li> а не просто «переопределить» унаследованный стиль? Я добавил пояснения к редактированию в оригинальном посте.
user1063287 16 дек. 2013, в 04:40
0

как вы выбираете? Я думаю, вам нужно радио или выпадающий выбор?
Rizwan Shamsher Kaim Khani 16 дек. 2013, в 04:59

Показать ещё 2 комментария

Теги:

jquery

nested-lists

5 ответов

2

// why does this first condition cause both li to be green?
$("li:has(ul)").css('background','Green');

Вышеприведенная строка НЕ приводит к тому, что оба li будут зелеными. Это приводит к тому, что первый родительский li только зеленым. Однако, поскольку дочерний элемент li (который не содержит ul) не имеет собственного цвета фона, он кажется зеленым, потому что он наследует родительский фоновый цвет.

Hady 16 дек. 2013, в 02:25

1

HTML и Javascript, с которыми вы писали конфликт. Второй <li> вложен внутри первого, и поскольку он имеет зеленый цвет фона, все дочерние элементы находятся внутри фона <li>.

См. Здесь: http://jsfiddle.net/H5ZdE/4/

Javascript на самом деле не стилизует второй цвет <li> на зеленый. Это просто внутри фона <li>, фон которого зеленый.

Patrick Moore 16 дек. 2013, в 02:54

0

Это имеет больше смысла, +1.
Blender 16 дек. 2013, в 04:17

0

Для выбора li который имеет вложенное ul использование

$('li ul').parent() (это вернет родительские теги li выбранных тегов ul. Вы также можете использовать li>ul)

tewathia 16 дек. 2013, в 02:27

0

попробуй это

$("li:has(ul)").css('background', 'green')
$('li ul').css('background', 'red')

http://jsfiddle.net/H5ZdE/6/

fengd 16 дек. 2013, в 01:23

Ещё вопросы

Это не выбор обоих. <ul> находится в <li> , поэтому он также получает зеленый фон.
потому что дочерний li наследует цвет фона от элемента предка
Есть ли способ специально выбрать каждый <li> а не просто «переопределить» унаследованный стиль? Я добавил пояснения к редактированию в оригинальном посте.
как вы выбираете? Я думаю, вам нужно радио или выпадающий выбор?

user1063287 · Accepted Answer · 2013-12-16T08-57-00.000Z

Решение:

Ниже приведены желаемые результаты, т.е. Отдельная функциональность для верхнего уровня и вложенных <li>.

Честно говоря, я еще не знаю, как это работает, но он работает, и я добавил немного дополнительной функциональности, чтобы проверить ситуацию. Но никаких следов, необходимых для хорошего тона кода, не требуется.

HTML:

<div id="container">
<ul class="squares">
<li>
<ul class="nested">
<li class="hidden_li" style="height: 20px; width: 50px; background: yellow; display: none; position: relative; z-index: 999999; left: 0px;top: 70px;">
<a href="">test</a>
</li></ul>
</li>
<li>
<ul class="nested">
<li class="hidden_li" style="height: 20px; width: 50px; background: yellow; display: none; position: relative; z-index: 999999; left: 0px;top: 70px;">
<a href="">test</a>
</li></ul>
</li>
<li></li>
<li></li>
// etc
</ul>
</div>

CSS

#container {
height: 205px;
overflow-y: auto;
width: 400px;
}

.select {
border: 2px solid red !important;
}

.select_blue {
border: 2px solid blue !important;
}

.squares {
list-style: none outside none;
margin: 0;
padding: 0;
white-space:nowrap;
}

#container ul li {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
border-radius: 4px;
cursor: pointer;
display: inline-block;
height: 100px;
margin-right: 25px;
vertical-align: top;
width: 100px;
}

JQuery

// just for <li>
$(document).on("click","ul.squares > li:nth-child(1n-7)", function (e) {
$(".hidden_li").hide();    
$(this).find(".hidden_li").fadeIn();
$("ul.squares > li:nth-child(1n-7)").removeClass("select");
$(this).addClass("select");
e.preventDefault();
//alert("i am a li");
});

// just for nested <li>
$(document).on("click","ul.nested > li", function (e) {
e.stopPropagation();
$("ul.nested > li").removeClass("select_blue");
$(this).addClass("select_blue");
e.preventDefault();
alert("i am a nested li");
});

Больше комментариев и демо на jsFiddle:

http://jsfiddle.net/rwone/H5ZdE/31/