javascript - 使用 jQuery 选择元素有两个特定的子元素

Question

我想通过匹配两个 child 来选择 parent 。 我的代码:

$('span:contains("11:00am"), span.name:contains("Tom")').parents("a").css("background-color","rgb(255, 255, 255)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a style="background-color: rgb(0, 0, 0);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Tom</span>
</a>
<a style="background-color: rgb(0, 0, 0);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Jack</span>
</a>

但是，这将选择汤姆和 jack 的时间。

Answer 1

您需要选择a标签，然后使用:has()过滤元素的选择器具有特定的子元素。

$('a:has(span:contains("11:00am")):has(span.name:contains("Tom"))')

$('a:has(span:contains("11:00am")):has(span.name:contains("Tom"))').css("background-color","rgb(255, 255, 255)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a style="background-color: rgb(0, 0, 0);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Tom</span>
</a>
<a style="background-color: rgb(0, 0, 0);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Jack</span>
</a>