Question

在我的example中，有两个列表具有相同的结构。这里是一个元素的结构。

<div class="box">
  <button class="next">Next</button>
  <ul class="myList">
    <li>1</li>
    <li>2</li>
    <li class="current">3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

因此，当我点击DIV（.box）内的按钮时，只更改此框中的内容。如果可能的话，我不想更改类名或使用id。

Answer 1

使用closest()查找所需的父级，例如：

$('.next').on("click", function(){
    var parent = $(this).closest('.box');
    //other stuff
});

Here's an example

Answer 2

有很多不同的方法可以做到这一点。您不能使用全局类选择器，因为您希望限制DOM的某个部分内的选择。查看jQuery's hierarchial selectors。

执行此操作的一种方法是遍历父级，并在其中查找匹配的元素。

var current = $(this).parent().find('li.current');
current.removeClass('current').next('li').addClass('current');

Here's a fiddle.

JQuery：如果结构相同，匹配选择器是什么？

2 个答案: