如何使用 jQuery select 来自 specific/selected 元素的第 n 个相邻元素？

Question

如何使用 jQuery select 来自 specific/selected 元素的第 n 个相邻元素？

在下面的示例中，如何从 selected/specific 元素 (<li class="active" ><a href="#">this is the current active element</a></li>).

select 第二个相邻元素 (<li><a href="#">this is the 2nd adjacent element from active</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

如果你想 select 当前活动元素的第二个下一个兄弟，你可以使用 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>

你仍然需要应用规则来决定当它结束时你希望它如何表现并且没有兄弟姐妹留给 select。

Answer 2

您可以将 eq() 与 nextAll() 结合使用 https://api.jquery.com/nextAll/

$(document).ready(function(){

  function getNthSibling(parentSelector, n)
  {
    return $(parentSelector).nextAll().eq(n);
  }
  
  $('#select').on('click', function() {
    getNthSibling('li.active', 1).addClass('selected');
  });
  
});

#select{ background:blue;}
ul{ list-style:none; float:left; clear:both}
ul li{float:left; clear:both;}
.active a{background:red;}
.selected a{background: green;}
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>

如何使用 jQuery select 来自 specific/selected 元素的第 n 个相邻元素？

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

html

javascript

css

jquery

jquery-selectors