使用 jQuery 从父项中查找下一个元素

Question

我有以下 DOM 结构：

<label>
  <span class="tt">
    <a href="#" class="editable">Hello1</a>
    <a href="#" class="editable">Hello2</a>
    <a href="#" class="editable">Hello3</a>
    <a href="#" class="editable">Hello4</a>
  </span>
  <a href="#" class="editable">Hello5</a>
</label>

当我单击锚点 Hello3 时，我需要获取 Hello4 并且它的工作绝对正常。但是，如果我单击 link Hello4，我需要得到 Hello5，但我没有得到正确的结果。

我正在使用以下代码：

$(document).on('click','.editable',function(){
  console.log($(this).nextAll('.editable').first());
});

我真正想要的是当我点击一个锚点时在 label 标签中获得 class of editable 的下一个元素。

Answer 1

您不能使用 nextAll()，因为它基于兄弟元素，在您的情况下，所有 editable 元素都不是兄弟元素。

您可以使用基于索引的查找来查找下一个元素，例如

$(document).on('click', '.editable', function() {
  var $all = $('.editable');
  snippet.log($all.eq($all.index(this) + 1).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<label>
  <span class="tt">
    <a href="#" class="editable">Hello1</a>
    <a href="#" class="editable">Hello2</a>
    <a href="#" class="editable">Hello3</a>
    <a href="#" class="editable">Hello4</a>
  </span>
  <a href="#" class="editable">Hello5</a>
</label>

Answer 2

除了 class select 或特定 [=13] 的 select 元素之外，您还可以使用兄弟函数 returns 给定元素的所有兄弟=]. 像这样：

$(document).on('click','.editable',function(){
  console.log($('.tt').siblings('.editable').first());
});

使用 jQuery 从父项中查找下一个元素

Find next element out of parent using jQuery

jquery

dom

nextsibling