javascript - 如何使用 jQuery 从特定/选定元素中选择第 n 个相邻元素？

Question

如何使用 jQuery 从特定/选定元素中选择第 n 个相邻元素？

在下面的示例中，如何从选定/特定元素 ( <li><a href="#">this is the 2nd adjacent element from active</a></li> ) 中选择第二个相邻元素 ( <li class="active" ><a href="#">this is the current active element</a></li> )。

请注意:我不能使用 eq() 或 nth-child，因为当前事件元素会在每次鼠标单击时动态变化。

$(document).ready(function(){
  $("#select").on('click', function(){
    $("li").eq("2").addClass("active");
  });
});

#select{ background:blue;}
ul{ list-style:none; float:left; clear:both}
ul li{float:left; clear:both;}
.active a{background:red;}
a{ color:#fff; background:#444; text-decoration:none; padding:5px; margin:2px; float:left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="select" href="#">click to select the 2nd adjacent element from current active </a>
<ul>
  <li><a href="#">111</a></li>
  <li class="active" ><a href="#">this is the current active element</a></li>
  <li><a href="#">333</a></li>
  <li><a href="#">this is the 2nd adjacent element from active</a></li>
  <li><a href="#">555</a></li>
 
</ul>

Answer 1

How to select the nth adjacent element from a specific/selected element using jquery

如果你想选择当前事件元素的第二个下一个兄弟，你可以使用 nextAll()，类似于:

$("li.active").nextAll().eq(2);

$(document).ready(function() {
  $("#select").on('click', function() {
  //console.log($("li.active").nextAll());
  $("li.active").removeClass('active').nextAll().eq(2).addClass("active");;
  });
});

#select {
  background: blue;
}

ul {
  list-style: none;
  float: left;
  clear: both
}

ul li {
  float: left;
  clear: both;
}

.active a {
  background: red;
}

a {
  color: #fff;
  background: #444;
  text-decoration: none;
  padding: 5px;
  margin: 2px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="select" href="#">click to select the 2nd adjacent element from current active </a>
<ul>
  <li><a href="#">111</a></li>
  <li class="active"><a href="#">this is the current active element</a></li>
  <li><a href="#">333</a></li>
  <li><a href="#">this is the 2nd adjacent element from active</a></li>
  <li><a href="#">555</a></li>

</ul>

---

当它结束并且没有 sibling 可供选择时，您仍然需要应用有关您希望它如何表现的规则。