jQuery - 将方法应用于多个对象

Question

我希望能够在多个声明的变量上运行相同的方法。

例如，假设我有以下代码：

var searchBtn = $('#search');
var signInBtn = $('#signin');

signInBtn.removeClass('active');
searchBtn.removeClass('active');

我想要做类似这样的事情：

$(signInBtn, searchBtn).removeClass('active');

但我不能这样做，searchBtn在这个上下文中被解释为作用域（我想是这样）。

我的问题是，如何将定义的对象组合起来并运行相同的方法？

注意：仅澄清一下，我不是在谈论使用ID、类等针对元素进行定位，而是指已经定义为变量的对象。

- Paul Redmond

---

你也可以这样做：$('.active').removeClass('active');。 - Jai

那是另一种方法，谢谢。 - Paul Redmond

Answer 1

你可以使用 add() 来合并两个jquery对象集合：

var searchBtn = $('#search');
var signInBtn = $('#signin');

signInBtn.add(searchBtn).removeClass('active');

如果您有多个对象，您可以链接 add() 或把这些对象放在一个数组中，然后使用reduce() 方法进行合并（add() 不支持多个参数）：

[signInBtn,searchBtn,anotherButton].reduce(function(a,b){return a.add(b);})
    .removeClass('active');

示例片段

$('#deactivate').click(function() {

  var searchBtn = $('#search');
  var signInBtn = $('#signin');
  var exitBtn = $('#exit');

  [searchBtn, signInBtn, exitBtn].reduce(function(a, b) {
      return a.add(b);
    })
    .removeClass('active');

});

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="search" class="active">Search</button>
<button id="signin" class="active">Sign In</button>
<button id="exit" class="active">Exit</button>

<button id="deactivate">Deactivate</button>

- Rhumborl

---

好的，这很不错，离我想要的更接近了。如果有4或5个对象，只需继续使用.add吗？还是可以将它们全部合并到一个.add中？ - Paul Redmond

Answer 2

阅读文档后，jQuery()可以获取一组DOM元素并将它们转换成一个集合。因此，如果您不介意额外的开销，您只需要执行以下操作即可：

$([signInBtn[0], searchBtn[0]]).removeClass('active');

这是相当冗余的，因为它从你的jQuery对象中获取DOM节点，只是为了将它们转换回jQuery对象，但我猜它可以节省你遍历它们并将它们add()到一个空集合的步骤。

- Andrei Nemes

Answer 3

那么数组呢？将您的对象放入数组中，并使用each()循环它

- Der Vampyr

Answer 4

$('#search,#signin').removeClass('active');

- SimarjeetSingh Panghlia

Answer 5

您可以使用add()将元素添加到已存在的jQuery上下文中：

searchBtn.add(signInBtn).removeClass('active');

请查看文档

- haim770

---

我知道我可以用这种方式针对多个元素，我的问题是如何针对已定义的变量，即对象。 - Paul Redmond