jQuery 找不到子索引

Question

我有一个ul标签，其中包括另一个子ul标签。 我正在尝试访问子标签，但它无法正常工作。

// php
$parent_index = 1; // Parent Index, li of ul 
$child_index = 2; // Child Index, li of ul
$("ul li").eq($parent_index).addClass("red")
.children("ul li").eq($child_index).addClass("red");

.red {
color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> 
<li>Brazil
<ul><li>1st</li><li>2nd</li><li>3rd</li></ul></li> 
<li>Germany
<ul><li>1st</li><li>2nd</li><li>3rd</li></ul></li> 
<li>Italy
<ul><li>1st</li><li>2nd</li><li>3rd</li></ul></li> 
<li>Russia
<ul><li>1st</li><li>2nd</li><li>3rd</li></ul></li> 
</ul>

如果那时"3rd"的文本必须在德国 ul 标签中改变红色。

// php
$parent_index = 1; // Parent Index, Germany
$child_index = 2; // Child Index, 3rd

但是它根本不起作用。我的jQuery中的方法错了吗？

Answer 1

问题是您的选择器，ul li将选择页面中的所有li，而不仅仅是父页面。

您可以使用更具体的选择器，例如向父元素添加一个类，然后使用它来选择元素

// php
$parent_index = 1; // Parent Index, li of ul 
$child_index = 2; // Child Index, li of ul
// Jquery 
$(".parent > li").eq($parent_index).addClass("red").find("ul li").eq($child_index).addClass("red");

.red {
color: red
}
.red .red {
background-color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// html
<ul class="parent">
<li>Brazil
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Germany
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Italy
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Russia
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
</ul>

Answer 2

您只能访问第一个 ul 的，也只能访问它们的直接子级 使用$("ul").eq(0).find("> li")并防止在父li内部着色铝ul>li只需向UL添加一些额外的颜色类

ul {
color:black;
}

希望您正在寻找的内容：

请参阅下面的片段：

// php
$parent_index = 1; // Parent Index, li of ul 
$child_index = 2; // Child Index, li of ul
// Jquery 
$("ul").eq(0).find("> li").eq($parent_index).not("ul").addClass("red").find("ul li").eq($child_index).addClass("red");

.red {
color: red
}
ul {
color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Brazil
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Germany
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Italy
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Russia
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
</ul>