jQuery：包含完整的单词

Question

我想通过它的子文本但完全匹配（两个名称）来选择父元素。

<div class="card">
   <div class="name">buggy</div>
   <div class="name">fruits</div>
</div>
<div class="card"> <!-- select only this one card -->
   <div class="name">bug</div>
   <div class="name">fruits</div>
</div>

$('.card:contains("bug"):contains("fruits")') - 在这种情况下不起作用，因为它会抓取两张卡片，因为 buggy 也包含 bug。

$('.card').filter(function() {
    return $(this).find('.name').text() === "bug" && $(this).find('.name').text() === "fruits";
});

这也不行。

如何实现子元素文本的全匹配？

Answer 1

text() 方法返回集合中的文本内容，因此它不会检查所有.name 元素。尽管此语句没有任何意义 $(this).find('.name').text() === "bug" && $(this).find('.name').text() === "fruits" 因为 $(this).find('.name').text() 返回相同的值并与不同的字符串进行比较，所以它永远不会为真，最多只有一个为真。

为了使它起作用，分别过滤出满足您条件的元素，最后得到共同的元素。

// filter out elements which contains 'bug'
$('.card .name').filter(function() {
    return $(this).text() === "bug";
  })
  // get its parent
  .closest('.card')
  // filter elements in both
  .filter(
    // filter out elements which contains 'fruits'
    $('.card .name').filter(function() {
      return $(this).text() === "fruits";
    })
    // get its parent
    .closest('.card')
  );

let $ele = $('.card .name').filter(function() {
  return $(this).text() === "bug";
}).closest('.card').filter($('.card .name').filter(function() {
  return $(this).text() === "fruits";
}).closest('.card'));

$ele.addClass('test')

.test {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="name">buggy</div>
  <div class="name">fruits</div>
</div>
<div class="card">
  <!-- select only this one card -->
  <div class="name">bug</div>
  <div class="name">fruits</div>
</div>

---

或者替代方法是在主过滤器​​内实现多个嵌套过滤器。

// iterate over the car divs
$('.card').filter(function() {
  // iterate over the strings to check each of them
  return ['fruits', 'bug'].every(str => $('.name', this).filter(function() { // get .name inside and filter based on match and check length of filtered
    return $(this).text() === str;
  }).length);
});

let $ele = $('.card').filter(function() {
  return ['fruits', 'bug'].every(str => $('.name', this).filter(function() {
    return $(this).text() === str;
  }).length);
});


$ele.addClass('test')

.test {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="name">buggy</div>
  <div class="name">fruits</div>
</div>
<div class="card">
  <!-- select only this one card -->
  <div class="name">bug</div>
  <div class="name">fruits</div>
</div>

Answer 2

使用.filter，就像你正在做的那样，但是构造一个包含每个元素的文本内容的数组，然后检查你要查找的每个单词是否是数组中的included：

const $filteredCards = $('.card').filter(function() {
  const nameTexts = $(this)
    .children()
    .map(function() { return $(this).text() })
    .get();
  return nameTexts.includes('bug') && nameTexts.includes('fruits')
});

$filteredCards.css('background-color', 'yellow');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
   <div class="name">buggy</div>
   <div class="name">fruits</div>
</div>
<div class="card"> <!-- select only this one card -->
   <div class="name">bug</div>
   <div class="name">fruits</div>
</div>