Question

如果我有多个元素数组，那么为了对所有元素执行操作，它们的语法是什么？

  $b = $('.b');
  $c = $('.c');
  $($b, $c).addClass('selected'); // only selects elements in $b

https://codepen.io/awestmoreland/pen/eVmEZZ

我踢自己是因为我知道我错过了一些明显的东西。

Answer 1

第二个参数是context，因此它无法按预期工作。您可以使用add()方法创建新的组合jQuery选择器。

$b.add($c).addClass('selected');

var $b1 = $('.b'),
  $c1 = $('.c');

$b1.add($c1).addClass('selected');

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="b">R</div>
<div class="c">B</div>

Answer 2

您可以使用add()方法：

$b.add($c).addClass('selected');

这显然假设您已经拥有这些引用，否则您可以使用以逗号分隔的单个选择器：

$('.b, .c').addClass('selected');

Answer 3

您可以使用.add()，或通过它创建一个数组并循环（.each()）。

注意：请勿使用.add()使代码过于复杂，选择$('.b, .c')会更好。

//.add():
$b1 = $('.b.one');
$c1 = $('.c.one');

$($b1).add($c1).addClass('selected');

//.each():
$b2 = $('.b.two');
$c2 = $('.c.two');
$([$b2, $c2]).each(function(){
  $(this).addClass('selected');
})

div{
  width: 15px;
  height: 15px;
  display: inline-block;
}

.b{
  background-color: red;
}

.c{
  background-color: blue;
}

.selected{
  background-color: purple !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>.add() :</p>
<div class="b one">R</div>
<div class="c one">B</div>

<br/><br/>

<p>.each() :</p>
<div class="b two">R</div>
<div class="c two">B</div>

Answer 4

另一种最短的表现方式：

$('li.b, li.c').addClass('selected');

将多个元素数组合并到单个jQuery选择器中

4 个答案: