Question

我知道我可以使用$.each将相同的事件处理程序应用于两个不同的jQuery对象。我很惊讶不可能有一个更清晰的语法，如：

  var $span = $('span');
  var $div = $('div');

  var clickHandler = function () {
    $(this).toggleClass('red');
  }

  $($span, $div).on('click', clickHandler); // <-- Neater syntax
  $([$span, $div]).on('click', clickHandler); // <-- A little worse, but still better than $.each

为什么我试过的语法不起作用？是否有更简洁的替代方法来使用$.each？

Answer 1

您可以将CSS语法用于多个选择器 - 逗号,：

$('span, div').on('click', clickHandler);

或者，如果您有包含元素的变量，则可以使用add()

$span.add($div).on('click', clickHandler);

Answer 2

$span.add($div).on('click', clickHandler)

根据add() docs。

，你应该做你想做的事

$($span, $div)被解释为$span，它们是$div的后代。
$([$span, $div])期望数组元素为DOMElements，而不是jQuery对象（我一直希望这也是可能的）

您可以在jQuery documentation

Answer 3

您还可以使用jQuery的.add()^link方法扩展包装集

$span.add( $div ).on( 'click', clickHandler );

Answer 4

在我看来，你理解选择器而不是处理程序有问题，就像上面提到的其他人一样：使用;

$('span, div')

将相同的处理程序应用于多个jQuery对象

4 个答案: