.prevAll()

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector, in the reverse document order.

.prevAll(selector)🡢 jQuery

selector SelectorA string containing a selector expression to match elements against.

Given a jQuery object that represents a set of DOM elements, the .prevAll() method searches through the predecessors of these elements in the DOM tree and construct a new jQuery object from the matching elements; the elements are returned in order beginning with the closest sibling.

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a simple list on it:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

If we begin at the third item, we can find the elements which come before it:

$("li.third-item").prevAll().css("background-color", "red");

The result of this call is a red background behind items 1 and 2. Since we do not supply a selector expression, these preceding elements are unequivocally included as part of the object. If we had supplied one, the elements would be tested for a match before they were included.

Note: Many APIs, like append or wrapAll process node in the order in which they appear in the jQuery object. This can pose issues with APIs like .prevAll() in which the reverse document order is used. Consider the following example:

<div>
  <div>First</div>
  <div>Second</div>
  <div class="last-item">Last</div>
</div>

The following call:

$(".last-item").prevAll().wrapAll("<div class='wrapper'></div>");

would result in the following HTML:

<div>
  <div class="wrapper">
    <div>Second</div>
    <div>First</div>
  </div>
  <div class="last-item">Last</div>
</div>

because "Item 2" gets appended to the wrapper div first. To work around the issue, you may use $.uniqueSort() on the .prevAll() output first:

var prevSiblings = $(".last-item").prevAll();
$.uniqueSort(prevSiblings);
prevSiblings.wrapAll("<div class='wrapper'></div>");

Locate all the divs preceding the last div and give them a class.

JS
<div></div>
<div></div>
<div></div>
<div></div>
CSS
div {
  width: 70px;
  height: 70px;
  background: #abc;
  border: 2px solid black;
  margin: 10px;
  float: left;
}
div.before {
  border-color: red;
}
HTML
$("div").last().prevAll().addClass("before");
DEMO

Locate all the divs preceding the last item and wrap them with a div with class wrapper - with or without $.uniqueSort().

JS
<div class="container" id="container-1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="container" id="container-2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
CSS
body {
  display: flex;
}
.container {
  display: flex;
  margin: 10px 50px 10px 10px;
}
.wrapper {
  position: relative;
  display: flex;
  padding: 30px 10px 10px 10px;
  background: #def;
  border: 2px solid black;
}
.wrapper::before {
  content: attr(data-content);
  position: absolute;
  top: 15px;
  left: 15px;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background: #abc;
  border: 2px solid black;
  margin: 10px;
  font-size: 50px;
}
HTML
$("#container-1")
  .find(".item")
  .last()
  .prevAll()
  .wrapAll("<div class='wrapper' data-content='No uniqueSort'></div>");

var prevSiblings = $("#container-2").find(".item").last().prevAll();
$.uniqueSort(prevSiblings);
prevSiblings.wrapAll(
  "<div class='wrapper' data-content='With uniqueSort'></div>"
);
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)