Получить следующий элемент с тем же классом

Question

Я использую событие click для элемента с определенным классом. Внутри функции события click мне нужно получить следующий элемент на странице с тем же классом. Я пробовал:

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

И:

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

.class-является DIV внутри TD в таблице, поэтому три раза родителя().

Мой HTML есть что-то вроде этого (The .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> 

Answer 1

Вы можете попробовать:

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

Answer 2

Как насчет этого? Однако вы должны проверять ошибки «один за другим», потому что я его не тестировал.

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

Answer 3

Вы можете использовать комбинацию slice() и each():

var elements = $('.class'); 

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

DEMO

В качестве альтернативы (хотя, возможно, менее эффективный) была бы получить ссылку на общий предок и использовать slice() и index():

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