jQuery найти первого родителя с ребенком - PullRequest
Новая
       51

jQuery найти первого родителя с ребенком

0 голосов
/ 01 марта 2019

Как найти первый родительский элемент с вложенным дочерним элементом по тексту?

Мне нужно проверить для каждого элемента с классом "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
  }
});

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Использование Следующий смежный Селектор («предыдущий + следующий») 

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

0 голосов
/ 01 марта 2019

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