Question

我的<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's 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>应用不同的点击功能，这就是为什么我需要弄清楚如何准确选择它们而不仅仅依靠'重写'继承的风格等

Answer 1

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

上述行不会导致li都为绿色。它导致第一个父li仅为绿色。但是，因为孩子li（不包含ul）没有自己的背景颜色，所以它看起来是绿色的，因为它继承了父母的背景颜色。

Answer 2

您撰写的HTML和Javascript存在冲突。第二个<li>嵌套在第一个中，因为它的背景为绿色，所有子元素都在<li>背景内。

见这里：http://jsfiddle.net/H5ZdE/4/

Javascript实际上并没有将第二个<li>设置为背景绿色。它只是在<li>里面，其背景是绿色。

Answer 3

用于选择嵌套li

的ul

$('li ul').parent() （这将返回所选li代码的父ul代码。您也可以使用li>ul

Answer 4

试试这个

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

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

Answer 5

<强>解决方案：

以下内容实现了预期的结果，即顶级和嵌套<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/

如何仅使用<ul>选择<li>？</ul> </li>

5 个答案: