有没有更有效的方法将多个 id 选择器与 jQuery 中的子选择器结合起来？

Question

有没有什么方法可以为多个 ID 编写一个 jQuery 选择器，同时使用父 > 子选择器？

我知道我能做到...

$('#checkbox1').click(function() {
  // do stuff
});

...或者这个...

$('#div1 > input[type=checkbox]').click(function() {
  // do stuff
});

...或者这个...

$('#checkbox1, #checkbox2, #checkbox3').click(function() {
  // do stuff
});

...但是当我将两者结合起来时，它会变得有点冗长。还有更多的efficient/compact方法吗？...

$('#div1 > input[type=checkbox], #div2 > input[type=checkbox], #div3 > input[type=checkbox]').click(function() {
  // do stuff
});

Answer 1

使用.children()

$("#div1, #div2, #div3").children("input[type=checkbox]").click(function() {
    // do stuff
});

Answer 2

由于 jQuery 实际上只是 JavaScript，而您的选择器只是字符串，您实际上可以将它们保存到变量中并将它们连接在一起。您可以更进一步，将它们存储到一个数组中。例如...

var section = [
    '#checkbox1',
    '#div1 > input[type=checkbox]',
    '#checkbox1, #checkbox2, #checkbox3'
];

$(section[0] + ", " + section[1] + ", " + section[2]).click(function() {
  // do stuff
});

根据您的代码，您可以大大减少选择器的大小。你甚至可以做一些很酷的数组函数，使它成为一种更有效的分组方式。

有没有更有效的方法将多个 id 选择器与 jQuery 中的子选择器结合起来？

Is there a more efficient way to combine multiple id selectors each with a child selector in jQuery?

jquery

jquery-selectors