JQuery：访问每个中的原始 jquery 对象

Question

我正在尝试在 JQuery 中的一组 DIV 上实现 HTML 单选按钮行为。 我想从所有元素中删除“set”类，然后使用 addClass() 重新设置被单击的（一个）元素：

$(".button").each(function() {
  $(this).click(function(){
    // what goes here to call removeClass() on *all* the elements?
    $(this).addClass("set");
  });
});

我想对所有元素调用removeClass() - 在本例中为 $(".按钮”），但我无法明确引用 $(“.button”) 。

我不能只在循环外部调用 $(".button").removeClass("set") ，因为这是更大程序的一部分，并且each() 循环内的行为可以通过其他参数进行修改。

有没有办法从内部访问完整的元素集，或将它们作为变量传递？ 或者还有其他方法来解决这个问题吗？

Answer 1

这看起来不必要地复杂，它可能有助于更清楚地了解您最终想要实现的目标。

在循环内，您可以使用 jquery $("div") // 在循环内获取您喜欢的任何内容

Answer 2

您可能正在寻找新的 选择器 功能，因为您正在制作插件：

jQuery.fn.test = function() {
    console.log(this.selector); // .button
};

$('.button').test();

Answer 3

如果您无法在内部函数中对选择器进行硬编码，jQuery 实际上可以返回在原始调用中用作选择器的字符串。 请参阅 $('.bla').selector

这仅在较新版本中添加。

Answer 4

只是改变：

$(".button").each(function() {
  $(this).click(function(){
    $('.button').removeClass("set");
    $(this).addClass("set");
  });
});

我不明白为什么这会是一个问题，每次都要拉 .button 有点慢，但这是像你想要的那样包含在循环中的唯一方法。

Answer 5

你说“但我不能明确引用 $(".button") 。”。 这是为什么？

$(".button").each(function() {
  $(this).click(function(){
    $('.button').removeClass('set'); // this should do it
    $(this).addClass("set");
  });
});

Answer 6

仍然不确定为什么不能从内部函数引用 $('.button') 但您可以捕获自由变量中的引用吗？

var buttons = $(".button");
buttons.each(function() {
  $(this).click(function(){
    // what goes here to call removeClass() on *all* the elements?
    buttons.removeClass('set');
    $(this).addClass("set");
  });
});

Answer 7

我回答了文本正文中提出的问题：如果您想设置同级的每个 other 元素的类，请使用siblings。

有趣，因为这是在 radioClass() 下的路线图中

你想要的是 < a href="http://docs.jquery.com/Traversing/siblings" rel="nofollow noreferrer">siblings，也不要使用each来设置点击事件。

$(".button").click(function() {
  $(this).addClass('set');
  $(this).siblings('.button').removeClass('set');
});

请参阅此示例以了解上述操作：

http://jsbin.com/ewiqe