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

<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()`.

<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;
}