javascript - Jquery 多个选择器和多个包含

Question

我可以用多个选择器搜索一个 div，每个选择器都包含在一个 jquery 字符串中吗？它必须是 AND 而不是 OR 搜索。

$('.row .people:contains("James") .tags:contains("episode")')

上面的选择应该返回下面的第一个 div。

<div class="row">
  <span class="people">James</span>
  <span class="tags">episode</span>
</div>
<div class="row">
  <span class="people">Bill</span>
  <span class="tags">episode</span>
</div>
<div class="row">
  <span class="people">James</span>
  <span class="tags">podcast</span>
</div>

Answer 1

您可以使用 jQuery 的 .has()检查一个元素是否包含某些后代。您可以将 :contains 嵌套在 .has() 语句中。

这将允许您检查 .row 是否包含带有特定文本的 span。

然后您可以添加第二个 .has() 语句来检查它是否具有匹配文本的两个跨度。

请注意，在您的示例 HTML 中，按照您描述的方式进行检查会使事情变得过于复杂，因为您可以只执行 .row:first-child，但假设您确实需要以这种方式检查事情，这就是要走的路。

示例:

$('.row').has('.people:contains("James")').has('.tags:contains("episode")').addClass('highlighted');

.row.highlighted {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <span class="people">James</span>
  <span class="tags">episode</span>
</div>
<div class="row">
  <span class="people">Bill</span>
  <span class="tags">episode</span>
</div>
<div class="row">
  <span class="people">James</span>
  <span class="tags">podcast</span>
</div>