jQuery找到第一个有孩子的父母

Question

How to find first parent element with nested child by text?

I need to check for each element with "name" class if it belongs to propper category with "title" class but the markup has the following structure:

<div class="row">
  <div class="col">
    <div class="title">
      <span>Cars</span>
    </div>
  </div>
  <div class="col">
    <a>
      <div class="name">Dodge</div>
    </a>
  </div>
  <div class="col">
    <div class="title">
      <span>Food</span>
    </div>
  </div>
  <div class="col">
    <a>
      <div class="name">Apple</div>
    </a>
  </div>
</div>

The dilemma is that I can't apply just .closest() or .prev() methods.

So, I think I need to check if nested "title" element with it's text was the first upper element of a closest parent othervise I will grab redundant section with unrelated title.

$('.name').each(function() {
  if ( $(this).closest('.col:contains("Food")').length ) {
    $(this).css('color', 'red'); // doesn't work
  }
});

Answer 1

closest() is correct here, but it gets the parent of the .name element, whereas the .col which contains Food is the previous sibling, so you need to add a prev() call in there too, like this:

 $('.name').each(function() { if ($(this).closest('.col').prev('.col:contains("Food")').length) { $(this).css('color', 'red'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col"> <div class="title"> <span>Cars</span> </div> </div> <div class="col"> <a> <div class="name">Dodge</div> </a> </div> <div class="col"> <div class="title"> <span>Food</span> </div> </div> <div class="col"> <a> <div class="name">Apple</div> </a> </div> </div> 

Alternatively you could invert the logic to find the .col which contains Food and retrieve the related .name . This removes the need for explicit loop and the if condition:

 $('.col:contains("Food")').next('.col').find('.name').css('color' , 'red'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col"> <div class="title"> <span>Cars</span> </div> </div> <div class="col"> <a> <div class="name">Dodge</div> </a> </div> <div class="col"> <div class="title"> <span>Food</span> </div> </div> <div class="col"> <a> <div class="name">Apple</div> </a> </div> </div> 

Answer 2

Using Next Adjacent Selector (“prev + next”)

 $('.col:contains("Food") + .col .name').css('color', 'red'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col"> <div class="title"> <span>Cars</span> </div> </div> <div class="col"> <a> <div class="name">Dodge</div> </a> </div> <div class="col"> <div class="title"> <span>Food</span> </div> </div> <div class="col"> <a> <div class="name">Apple</div> </a> </div> </div> 

Note: Can also be achieved with CSS alone.