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

像你一样使用 .filter ，但构造每个元素的文本内容的数组，然后检查你正在寻找的每个单词是否在数组中include d：

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>

Answer 2

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>