Question

我想写jQuery语句，如：

$(".someparentcontainer input[type=checkbox]:is(.foo, .bar, .xyz)")

作为简写：

$(".someparentcontainer input[type=checkbox].foo, .someparentcontainer input[type=checkbox].bar, .someparentcontainer input[type=checkbox].xyz)")

由于jQuery不支持（据我所知）a：is（）选择器我提出了以下解决方法：

$(".someparentcontainer input[type=checkbox]:not(:not(.foo, .bar, .xyz))")

我确实认识到，如果.someparentcontainer有大量的子元素，它在性能方面有其缺点，但它适用于小型dom-tree。

我在这里可能会遗漏任何陷阱吗？这种技术可能失败的任何情况？

Answer 1

您可以使用jquery＆＃39; find函数：

＆＃13;

$("#someparentcontainer").find("#foo, #bar, #xyz").css('color', 'red')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someparentcontainer">
  <div id="foo">foo</div>
  <div id="bar">bar</div>
  <div id="abc">abc</div>
</div>
<div id="xyz">xyz</div>

＆＃13;

这更有意义。

Answer 2

我在这里可能会遗漏任何陷阱吗？这种技术可能失败的任何情况？

当您标记了问题css-selectors，the standard does not allow :not() to be nested within another :not()时。标准中:not()的每个已知实现都正确地将您拥有的内容视为无效。如果jQuery允许这样做（我不能说我很惊讶，如果确实如此），那么这是非标准的，你需要非常小心，不要在jQuery之外依赖它（例如，它赢了＆＃39;在querySelectorAll()或CSS中工作。

推荐的方法是使用.filter()代替：

// If you know that the element with any of these ids is always a checkbox,
// substitute ".someparentcontainer *" for the second selector string
$(".someparentcontainer input[type=checkbox]").filter(".foo, .bar, .xyz")

但这意味着您必须编写两个单独的选择器字符串。然后，在使用符合标准的复杂选择器之前，无法执行此操作，直到选择器4 :matches()被实现（参见Does jQuery have something like the :any or :matches pseudo-class?）。

使用：not（：not（））来模拟（假设的）：jQuery中的is（）选择器

2 个答案: