我的 HTML:
<ul>
<li class="select-me"><b>1</b> <span>Click</span></li>
<li>2</li>
<li class="select-me"><b>3</b> <span>Click</span></li>
<li>4</li>
</ul>
我的JS:
$(function() {
$('ul li span').on('click', function() {
var previousSelectMe = $(this).parent().prev('.select-me');
var nextSelectMe = $(this).parent().next('.select-me');
console.log(nextSelectMe.find('b').text(), previousSelectMe.find('b').text());
});
});
现在我的代码略有不同,但这是主要逻辑。我遇到的问题是我无法获取 NEXT .select-me
元素,因为中间没有 select-me 元素。因此,使用上面的代码,下一个元素未定义。
如果我将 HTML 结构更改为:
<ul>
<li class="select-me"><b>1</b> <span>Click</span></li>
<li class="select-me"><b>3</b> <span>Click</span></li>
<li>2</li>
<li>4</li>
</ul>
工作正常并打印 3
进行下一步。当我点击 3
的 Click
项目时,它会给出正确的之前的 1
。
最佳答案
如果你想获取下一个元素,即使它不相邻,你可以使用它:
.nextAll('.select-me:first');
.prevAll('.select-me:first');
关于javascript - JQuery 使用 .next ('.selector' 选择下一个 .selector 元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25169958/