使用jQuery查找前一个兄弟元素

Question

在下面的HTML中，我想要给在class为"div-class"的div元素之前的第一个P元素添加一个类。

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

- user715564

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

- Pranav C Balan

Answer 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()。

- DontVoteMeDown

---

FYI，位置选择器已被弃用。 - birdspider

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>

- j08691