Как найти элемент, используя текст ()

Question

Мне интересно, возможно ли скрыть родительский div на основе содержимого дочернего текста?

//$('div > .tree-title').hide(); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <span>1</span>
  <span></span>
  <span class="tree-title">Hello</span>
</div>
<div class="container">
  <span>2</span>
  <span></span>
  <span class="tree-title">World</span>
</div>

В этом случае я хотел бы скрыть второй div, потому что класс .tree-title содержит World текст.

Answer 1

Вы можете использовать jQuery :contains() и .parent()

$('div > .tree-title:contains(World)').parent().hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <span>1</span>
  <span></span>
  <span class="tree-title">Hello</span>
</div>
<div class="container">
  <span>2</span>
  <span></span>
  <span class="tree-title">World</span>
</div>

Answer 2

Использование содержит :

$('div > .tree-title:contains("World")').parent().hide();

Использование фильтра :

$('.tree-title').contents().filter(function(){
  return $(this).text().trim() == 'World';
}).parents('container').hide();

Answer 3

Вы также можете:

$('.tree-title').each(function() {
  if($(this).text() === 'World') {
    $(this).parent().hide();
  }
});

Надеюсь, это поможет:)

Answer 4

Использование :has и :contains Селектор

$('div:has(.tree-title:contains(World))').hide();

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

<div class="container">
  <span>1</span>
  <span></span>
  <span class="tree-title">Hello</span>
</div>
<div class="container">
  <span>2</span>
  <span></span>
  <span class="tree-title">World</span>
</div>