Question

在下面的HTML中，我想将一个类添加到div之前的第一个同级P元素中，该类具有“ 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");

Answer 1

您可以使用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()。

Answer 2

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:

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

使用jQuery查找上一个同级元素

3 个答案: