我有以下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());
});
我真正想要的是当我点击一个锚时,在label标签中获得具有editable
类的下一个元素。
答案 0 :(得分:5)
您不能使用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>
答案 1 :(得分:0)
除了使用选择特定类元素的类选择器之外,您还可以使用返回给定元素的所有兄弟节点的兄弟节点函数。 像这样:
$(document).on('click','.editable',function(){
console.log($('.tt').siblings('.editable').first());
});