Блог

первый раз за долгое время. Попытка выбрать определенные элементы в ленте на основе этого селектора, которые содержат некоторые из их дочерних элементов. Рассматриваемый дочерний div (скрытый в divs внутри divs) выглядит следующим образом:

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

Их родительские div выглядят следующим образом:

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

Я хочу выбрать любой div, чей data-grid-item="true" , который также содержит дочерний div, чей data-test-id="example-test-id" .

В результате получается код, который выглядит следующим образом:

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

В этом случае я просто пытаюсь придать родительскому div красный фон, чтобы я мог убедиться, что я выбрал правильные элементы, которые, похоже, не работают. Как я уверен, вы можете сказать, я новичок в jquery, поэтому приведенный выше код — это то, что я смог почерпнуть из большого количества поисковых запросов. Любая помощь была бы высоко оценена.
Спасибо!

Это просто опечатка, вы были так близки :

 $("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>