Question

第一次很长时间。尝试根据其某些子项包含的选择器选择提要中的某些元素。有问题的子div（在div内的div中被深埋）看起来像这样：

<div data-test-id="example-test-id">
...
</div>

他们的父母div看起来像这样：

<div data-grid-item="true">
...
</div>

我想选择其data-grid-item="true"的任何div，也要包含其data-test-id="example-test-id"的子div。

生成的代码如下：

{$("div[data-grid-item='true']:has(data-test-id="example-test-id"])").css( "background-color", "red" )}

在这种情况下，我只是尝试为父div设置红色背景，以便可以验证是否选择了正确的元素，而这似乎没有用。如您所知，我是jquery的新手，因此上面的代码是我从大量的Google搜索中收集到的代码。任何帮助将非常感激。谢谢！

Answer 1

这只是一个错字，你太近了：

$("div[data-grid-item='true']:has(data-test-id="example-test-id"])")
__________________________________^ Missing '['

注意：双引号也是您需要替换的问题的一部分，然后用单引号将其替换：

$("div[data-grid-item='true']:has([data-test-id='example-test-id'])")
________________________________________________^_______________^

$("div[data-grid-item='true']:has([data-test-id='example-test-id'])").css("background-color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-grid-item="true">
  <div data-test-id="example-test-id">TEST 1</div>
</div>
<div data-grid-item="true">
  <div>TEST 2</div>
</div>
<div data-grid-item="true">
  <div data-test-id="example-test-id">TEST 3</div>
</div>

根据孩子的选择器选择div？

1 个答案: