1

我有许多通过 for 循环动态创建的无序列表。问题是我无法仅针对此 ul 中的元素，它一直在更改每个元素的 active 类。我很难理解什么是兄弟姐妹，什么是堂兄弟等等。我尝试了最接近（），兄弟姐妹（），上一个（），查找（）以及它们的一些不同组合，但似乎无法工作出去。 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?

});
4

6 回答 6

4

您可以将其简化为：

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

jsFiddle 示例

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

于 2013-03-20T20:48:09.983 回答
1

你可以绑定它

$('.button').on('click', function(e) {
    $('.button').removeClass('active'); //remove all classes
    $(this).addClass('active');  //add it to the clicked one
});
于 2013-03-20T20:46:06.553 回答
1

在您的示例中，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>类中具有“foo”类的兄弟姐妹，我们可以使用$(this).parent().siblings('.foo')来获取这些元素的数组。

.find(selector)将挖掘所有后代（孩子、孙子、曾孙等）并返回与选择器匹配的所有元素的数组，这就像'.foo'我们看到的选择器，它是一种使用“ foo" 类在前面的例子中。

于 2013-03-20T20:55:32.967 回答
0

尝试将其他设置为：

var others = set_active.parents('ul:eq(0)').find('.button').not($this);
于 2013-03-20T20:46:44.297 回答
0 
$('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');
});
于 2013-03-20T20:49:43.020 回答
-1

将活动类添加到单击的元素从其他元素中删除。 jsfiddle

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

});

于 2013-03-20T20:49:37.973 回答