Найти следующий элемент из родительских с помощью 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 и его работать абсолютно нормально. Но если я нажму на ссылку Hello4, мне нужно получить Hello5, который я не получаю правильно.

Я использую следующий код:

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

То, что я на самом деле хочу, чтобы получить следующий элемент, имеющий класс 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

Вы можете использовать функцию братьев и сестер, которая возвращает все братские данного элемента в дополнение с селектором класса, выберите элементы определенного класса. Что-то вроде этого:

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