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

【问题标题】：jQuery find first parent with childjQuery找到第一个有孩子的父母
【发布时间】：2019-07-23 13:50:29
【问题描述】：

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

我需要检查每个带有"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" 元素及其文本是否是最近父元素的第一个上部元素，否则我将获取标题不相关的冗余部分。

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

【问题讨论】：

标签： javascript jquery html sorting jquery-selectors

【解决方案1】：

closest() 在这里是正确的，但是它获取了.name 元素的父元素，而包含Food 的.col 是前一个兄弟元素，因此您还需要在其中添加一个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>

或者，您可以反转逻辑以查找包含Food 的.col 并检索相关的.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>

【讨论】：

【解决方案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 实现。

【讨论】：