Блог

Главная - Вопросы по программированию - Используйте jQuery для поиска предыдущего элемента-побратима

Используйте jQuery для поиска предыдущего элемента-побратима

#javascript #jquery

#javascript #jquery

Вопрос:

В приведенном ниже HTML я хотел бы добавить класс к первому элементу-двойнику P, который находится перед div, с классом «div-class».

 <p>hello</p>
<p>hello</p> -> add class to this element
<div><p>test</p></div>
<div class="div-class"></div>

Это не работает:

 jQuery(".div-class").prev("p").addClass("p-class");

Ответ №1:

prev() Метод выбирает только элемент-побратим, который находится непосредственно перед элементом, поскольку вы используете p селектор, он ничего не выберет, потому что нет никакого p тега, который находится непосредственно перед элементом.

Вы можете использовать prevAll() метод, чтобы получить все элементы-побратимы, которые находятся перед элементом, и first() метод, чтобы получить ближайший из коллекции.

 jQuery(".div-class").prevAll("p").first().addClass("p-class");  
 .p-class {
  color: red
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>hello</p>
<p>hello</p>
<div>
  <p>test</p>
</div>
<div class="div-class"></div>
This doesn't work:

Ответ №2:

Вы можете использовать siblings("p").last() :

 jQuery(".div-class").siblings("p").last().addClass("p-class");
  

 jQuery(".div-class").siblings("p").last().addClass("p-class");  
 .p-class {
  color: #f00
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>hello</p>
<p>hello</p>
<div><p>test</p></div>
<div class="div-class"></div>

jQuery siblings() возвращает все дочерние элементы из соответствующего селектора в порядке их размещения. Таким образом, желаемый элемент-двойник будет .last() в списке.

Комментарии:

1. К вашему сведению, позиционные селекторы удалены

Ответ №3:

Используйте:

 jQuery(".div-class").prev("div").prev("p").addClass("p-class");
  

 jQuery(".div-class").prev("div").prev("p").addClass("p-class");  
 .p-class{
  font-weight: bold;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>hello</p>
<p>hello</p>
<div>
  <p>test</p>
</div>
<div class="div-class"></div>