jQuery 首先找到 parent 和 child

Question

如何通过文本查找具有嵌套 child 的第一个 parent 元素？

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

<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" 元素及其文本是否是最接近的 parent 的第一个上层元素，否则我将获取标题不相关的冗余部分。

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

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

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实现。

jQuery 首先找到 parent 和 child

jQuery find first parent with child

html

javascript

sorting

jquery

jquery-selectors