将多个元素数组组合成单个 jQuery 选择器

Posted 2023-05-09

【中文标题】将多个元素数组组合成单个 jQuery 选择器

【英文标题】：Combine multiple arrays of elements into single jQuery selector

【发布时间】：2018-07-09 13:36:12

【问题描述】：

如果我有多个元素数组，将它们一起引用以对所有元素执行操作的语法是什么？

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

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

我在自责，因为我知道我遗漏了一些明显的东西。

【参考方案1】：

您可以使用add() 方法：

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

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

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

【讨论】：

谢谢。我已经有了参考资料，所以我想避免再次查找它们。

【参考方案2】：

另一种最短的执行方式：

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

【参考方案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>

【讨论】：

啊，我试过数组，但忽略了使用 .each。好提示！

【参考方案4】：

第二个参数是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>

【讨论】：

完美。谢谢！