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

Question

如何通过文本找到嵌套子元素的第一个父元素？

我需要使用"name"类来检查每个元素是否属于具有"title"类的propper类别，但是标记具有以下结构：

<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>

困境是我不能只应用.closest()或.prev()方法。

因此，我认为我需要检查嵌套的"title"元素是否与其文本是最近的父亲的第一个上层元素othervise我将获取具有不相关标题的冗余部分。

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

Answer 1

closest()在这里是正确的，但它获得了.name元素的父级，而包含.col的Food是之前的兄弟，所以你需要在那里添加一个prev()调用，如下所示：

$('.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>

或者你可以反转逻辑来找到包含.col的Food并检索相关的.name。这消除了对显式循环和if条件的需要：

$('.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

使用Next Adjacent选择器（“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>

注意：也可以单独用CSS实现。