获取下一个具有相同类名的元素

Question

我使用一个具有特定类的元素的点击事件。在点击事件函数中，我需要获取页面上具有相同类的下一个元素。我尝试了：

$('.class').click(function() {
    var $next = $(this).next('.class')  
});

并且：

$('.class').click(function() {
    var $next = $(this).parent().parent().parent().next('.class')  
});

.class是位于表格中td内的一个div，这就是为什么要使用三个parent()的原因。

我的HTML代码是这样的（.class 是 .drag）:

<table cellspacing="0" cellpadding="0" border="0" class="black8">
<tr class="trow1 drop trow1_over" 
    rel="0,1">
    <td>
            <div class="drop rootFolder" 
                 rel="0,1"></div>
    </td>
    <td width="100%" 
        class="folderListOnclick">

            <span>.. (koreňový adresár)</span>
    </td>
    <td>
    </td>
    <td>
    </td>
</tr><tr class="trow1">
    <td>
        <div class="drag drop ordinaryFolder" 
             rel="1,1" 
             style="width: 40px;">

        </div>
    </td>
    <td width="100%" 
        class="folderListOnclick" 
        rel="1">
            <span>aaa</span>
    </td>
    <td>
        <div class="button_mini folderEditOnclick" 
             rel="1">
                    <span></span>

        </div>
    </td>
    <td>
        <div class="button_mini folderDeleteOnclick" 
             rel="1">
                    <span><span>
        </div>
    </td>
</tr><tr class="trow1">
    <td>

        <div class="drag drop ordinaryFolder" 
             rel="19,1" 
             style="width: 50px;">
        </div>
    </td>
    <td width="100%" 
        class="folderListOnclick" 
        rel="19">
            <span>subaaa</span>
    </td>
    <td>
        <div class="button_mini folderEditOnclick" 
             rel="19">

                    <span></span>
        </div>
    </td>
    <td>
        <div class="button_mini folderDeleteOnclick" 
             rel="19">
                    <span><span>
        </div>
    </td>
</tr>
</table>

- Richard Knop

---

你能发布HTML吗？ - Felix Kling

你的方法为什么不起作用？ - Luca Matteis

@Luca：因为next()方法不是这样工作的。它只会返回与给定选择器匹配的下一个兄弟元素。 - Felix Kling

@Felix Kling：我发布了HTML示例。 - Richard Knop

Answer 1

这个怎么样？不过你应该检查一下 off-by-one 错误，因为我没有测试过。

$('.class').click(function () {
  var index = $('.class').index($(this));
  var $next = $('.class').slice(index+1,index+2);
  ...
});

- Nathan MacInnes

Answer 2

您可以尝试以下方法：

$(".drag").click(function() {
    var draggables = $(this).parents("table").find(".drag");
    var $next = draggables.filter(":gt(" + draggables.index(this) + ")").first();
});

- Frédéric Hamidi

---

谢谢。这是稍微简洁一些的代码：var $next = draggables.eq(draggables.index(this)); - Henrik N

Answer 3

您可以使用slice()和each()的组合：

var elements = $('.class');

elements.each(function(index, element) {
    $(this).click(function() {
        var $next = elements.slice(index+1, index+2);
    });
});

演示

或者（虽然可能不太高效），可以获取公共祖先的引用并使用slice()和index()：

$('.class').click(function() {
    var elements = $(this).closest('table').find('.class');
    var index = elements.index(this);
    $next = elements.slice(index + 1, index + 2);
});

- Felix Kling

---

@Richard：请定义“不起作用”的含义。我认为演示应该是正常工作的。 - Felix Kling

@Richard Knop：也许你是在我把“i”更新为“index”之前使用的那段代码。现在应该可以工作了。 - Felix Kling

Answer 4

我知道，这个问题已经过去了很长时间，但是...我找到了另一种一行解决的方法。

$('.class').on('click', function(){
    const next = $(this).nextAll('.class').eq(0)
    ...
})

$('a').on('click', function(e){
    e.preventDefault()
    $('.class').removeClass('next')
    $(this).nextAll('.class').eq(0).addClass('next')
})

a {
  background-color: rgba(0,0,0,0.1)
  display: block;
  padding: 4px 16px;
  width: 200px;
}
a.next {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="class">Class 1</a>
<a href="#" class="noclass">Noclass 1</a>
<a href="#" class="class">Class 2</a>
<a href="#" class="noclass">Noclass 2</a>
<a href="#" class="noclass">Noclass 3</a>
<a href="#" class="class">Class 3</a>

- René Orozco