代码之家 › 专栏 › 技术社区 › Richard Knop

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

jquery

Richard Knop · 技术社区 · 15 年前

我对具有特定类的元素使用单击事件。在click event函数中,我需要用相同的类获取页面上的下一个元素。我试过:

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

以及:

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

类是表中td内的div,这就是为什么三次使用parent()的原因。

我的HTML是这样的(类是.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>

3 回复 | 直到 15 年前

Frédéric Hamidi 15 年前

您可以尝试:

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

Nathan MacInnes 15 年前

这个怎么样?不过,你应该检查一个错误,因为我没有测试过。

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

Felix Kling 15 年前

你可以结合使用 slice() ,和 each() :

var elements = $('.class');

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

DEMO

或者(尽管可能效率较低)是获取对共同祖先的引用并使用 切片() 和 index() :

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