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

问题出在您的 select 上，ul li 将 select 全部 li 在您的页面中，而不仅仅是父页面。

您可以使用更具体的 select 或者，例如将 class 添加到父元素，然后将其用于 select 元素

// 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 中着色 al ul>li 只需添加一些额外的颜色 class 到 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>

jQuery 找不到子索引

jQuery cannot find children indexes

indexing

jquery

children

class