Jquery 如何仅选择<；李>；使用<；ul>；？

我有一个

，其中包含另一个
和

我希望能够访问任一
，并对每个应用不同的功能

我一直采用以下方法：

示例A：

如果此
包含
，请在单击
时执行此操作

例B：

如果此
不包含
，请在单击
时执行此操作

但它不起作用，所以我正在尝试测试基本原理

示例A似乎同时选择了
，甚至是不包含
的嵌套示例

HTML

JSFIDLE


编辑：

<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>

我只是想澄清一下，我想特别有选择性，这样我就可以对每个
应用不同的点击功能，这就是为什么我需要弄清楚如何准确地选择它们，而不是仅仅依靠“过度隐藏”继承的样式等。
您编写的HTML和Javascript冲突。第二个
嵌套在第一个中，由于其样式为背景绿色，因此所有子元素都位于该
背景中

请看这里：

Javascript实际上并没有将第二个
设置为背景绿色。它只是在背景为绿色的
中。
您编写的HTML和Javascript冲突。第二个
嵌套在第一个中，由于其样式为背景绿色，因此所有子元素都位于该
背景中

请看这里：

Javascript实际上并没有将第二个
设置为背景绿色。它只是在背景为绿色的
中。
您编写的HTML和Javascript冲突。第二个
嵌套在第一个中，由于其样式为背景绿色，因此所有子元素都位于该
背景中

请看这里：

Javascript实际上并没有将第二个
设置为背景绿色。它只是在背景为绿色的
中。
您编写的HTML和Javascript冲突。第二个
嵌套在第一个中，由于其样式为背景绿色，因此所有子元素都位于该
背景中

请看这里：

Javascript实际上并没有将第二个
设置为背景绿色。它位于背景为绿色的
内部。
用于选择具有嵌套
ul
用法的
li

$（'li ul'）.parent（）
（这将返回所选
ul
标记的父
li
标记。您也可以使用
li>ul
）
选择具有嵌套
ul
使用的
li

$（'li ul'）.parent（）
（这将返回所选
ul
标记的父
li
标记。您也可以使用
li>ul
）
选择具有嵌套
ul
使用的
li

$（'li ul'）.parent（）
（这将返回所选
ul
标记的父
li
标记。您也可以使用
li>ul
）
选择具有嵌套
ul
使用的
li

$（'li ul'）.parent（）
（这将返回所选
ul
标记的父
li
标记。您也可以使用
li>ul
）
尝试此操作

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

试试这个

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

试试这个

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

试试这个

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


上面的行不会使
li
都变成绿色。它导致第一个父级
li
仅为绿色。但是，由于子级
li
（不包含
ul
）没有自己的背景色，因此它看起来是绿色的，因为它继承了其父级的背景色

上面的行不会使
li
都变成绿色。它导致第一个父级
li
仅为绿色。但是，由于子级
li
（不包含
ul
）没有自己的背景色，因此它看起来是绿色的，因为它继承了其父级的背景色

上面的行不会使
li
都变成绿色。它导致第一个父级
li
仅为绿色。但是，由于子级
li
（不包含
ul
）没有自己的背景色，因此它看起来是绿色的，因为它继承了其父级的背景色

上面的行不会使
li
都变成绿色。它导致第一个父级
li
仅为绿色。但是，由于子级
li
（不包含
ul
）没有自己的背景色，因此它看起来是绿色的，因为它继承了其父级的背景色。
解决方案：

<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>

以下实现了所需的结果，即顶层和嵌套的
的独立功能

老实说，我还不知道它是如何工作的，但它是如何工作的，我添加了一些额外的功能来测试。但是代码漂亮不需要标记

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>

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");
});

//只为

$（文档）。在（“单击”，“ul.squares>li:n子项（1n-7）”，函数（e）{
$（“.hidden_li”）.hide（）；
$（this.find（“.hidden_li”）.fadeIn（）；
$（“ul.squares>li:n第n个子（1n-7）”）.removeClass（“选择”）；
$（this.addClass（“选择”）；
e、 预防默认值（）；
//警惕（“我是李”）；
});
//只为嵌套

$（文档）。在（“单击”，“ul.nested>li”，函数（e）{
e、 停止传播（）；
$（“ul.nested>li”）.removeClass（“选择蓝色”）；
$（this）.addClass（“sele