Question

我有许多这些无序列表，它们是通过for循环动态创建的。问题是我无法仅针对此ul中的元素进行定位，它一直在更改每个元素的活动类。我很难理解什么是兄弟姐妹，什么是堂兄等等。我尝试过最近的（），兄弟姐妹（），上帝（），发现（）以及它们的一些不同组合，但似乎无法正常工作出。 http://jsfiddle.net/T3cm4/

这是HTML

<ul>
    <li><a href="#" class="button active">Option 1</a></li>
    <li><a href="#" class="button">Option 2</a></li>
    <li><a href="#" class="button">Option 3</a></li>
    <li><a href="#" class="button">Option 4</a</li>
</ul>

JS

var set_active = $('.button');
set_active.on('click', function() {
  var $this = $(this);
  var others = set_active.not($this);

  $this.addClass('active');
  others.removeClass('active');

// this will remove all other active 
// states, what do I need to add so 
// it only selects the siblings?

});

Answer 1

你可以将它简化为：

$('.button').click(function () {
    $(this).parents('ul').find('a.button').removeClass('active');
    $(this).addClass('active');
});

<强> jsFiddle example

这会使用按钮类（.button）将点击处理程序分配给您的链接。点击后，它会上升到找到的第一个父ul，然后搜索所有a.button元素子项，并从所有子元素中删除活动类。然后它将活动类应用于刚刚单击的元素。

Answer 2

你可以绑定它

$('.button').on('click', function(e) {
    $('.button').removeClass('active'); //remove all classes
    $(this).addClass('active');  //add it to the clicked one
});

Answer 3

在您的示例中，this是<a>元素。它是<li>元素的子元素，没有兄弟姐妹。兄弟姐妹将是相同 <li>的其他孩子。您要访问的是<this>父母的兄弟姐妹的子女。选择这些，然后从中删除活动类的基本方法是使用以下行：

$(this).parent().siblings().children().removeClass('active');

$(this).parent()返回<li>的直接父级<a>，$(this).parent().siblings()返回所有其他子级的数组<ul>是<li>元素的$(this).parent().siblings().children()元素，<li>返回这些元素的所有子元素的数组，这是您正在查找的所有元素的数组对于。还有许多其他方法可以选择所有这些元素，正如您在其余答案中所看到的那样。

在任何这些选择器中，都可以通过向方法添加参数来过滤返回的内容。例如，如果我们只想要父类$(this).parent().siblings('.foo')的兄弟姐妹拥有“foo”类，我们可以使用.find(selector)来获取这些元素的数组。

'.foo'将挖掘所有后代（儿童，大孩子，曾孙子等）并返回与选择器匹配的所有元素的数组，这类似于{{1}}选择器我们看作是在前面的例子中使用“foo”类获取兄弟姐妹的一种方式。

Answer 4

尝试设置其他人：

var others = set_active.parents('ul:eq(0)').find('.button').not($this);

Answer 5

$('ul li a').first().addClass('active');
$('ul li a').on('click', function() {
  var parents = $(this).parents('ul');
  $('li a', parents).removeClass('active');
  $(this).addClass('active');
});

Answer 6

添加活动类以将clicked元素从其他元素中删除。 jsfiddle

var set_active = $('.button');
set_active.on('click', function() {
  set_active.parents("ul:first").find(".active").removeClass("active");   
  $(this).addClass('active');

}）;

如何使用jQuery访问这些元素以在点击时添加和删除类？

6 个答案: