选择元素有两个使用 jQuery 的特定子元素答案

【问题标题】：Select element has two specific children using jQuery选择元素有两个使用 jQuery 的特定子元素
【发布时间】：2019-08-09 14:07:24
【问题描述】：

我想通过匹配两个孩子来选择父母。我的代码：

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

但是，这将选择 Tom 和 Jack 的时间。

【问题讨论】：

标签： javascript jquery html jquery-selectors

【解决方案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>

【讨论】：

:has() 选择器是我正在寻找的，谢谢，像魅力一样工作。

【解决方案2】：

$('span:contains("11:00am"),span:contains("Jack")').parent("a").css("background-color", "Grey");
$('span:contains("11:00am"),span:contains("Tom")').parent("a").css("background-color", "Green");

<a style="background-color: rgb(255, 255, 255);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Tom</span>
</a>

<a style="background-color: rgb(255, 255, 255);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Jack</span>
</a>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

【讨论】：

@Mohammad 谢谢你的回答也增加了我的知识:)