Question

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

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

<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
  }
});

Answer 1

closest()在这里是正确的，但是它获得了.name元素的父元素，而包含.col的{{1}}是上一个兄弟元素，因此您需要添加也有一个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>的{{1}}并检索相关的.col。这样就无需显式循环和Food条件：

.name

if

Answer 2

使用Next Adjacent选择器（“上一个+下一个”）

$('.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找到第一个有孩子的父母

2 个答案: