jQuery API

.prevAll()

.prevAll( [selector] ) Returns: jQuery

Description: Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

  • version added: 1.2.prevAll( [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.

Example:

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

<!DOCTYPE html>
<html>
<head>
  <style>

  div { width:70px; height:70px; background:#abc; 
        border:2px solid black; margin:10px; float:left; }
  div.before { border-color: red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<script>$("div:last").prevAll().addClass("before");</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .prevAll() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .prevAll()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • Elod Csirmaz

    The order of prevAll elements: This is not documented here, but after some testing, it seems that they are in the reverse order. That is, $(this).prevAll().eq(0) is the element immediately preceding 'this'.

    • http://andrew.cleverdomain.org/ Andrew

      It would be really cool if this order was documented (and guaranteed), and e.g. $(this).prevAll(‘selector’).eq(0) documented as the way to get “the last element previous to this which matches the selector”, and likewise (but all swapped around) for next. Or is there some more elegant way to do that that I’m missing?

      • http://profiles.yahoo.com/u/FYMPFUJKUPTIC5TTJX6OPGOEL4 Heitor

        The jQuery object does not extend all native array functions, so you must revert explicity to have the inverse order.
        Array.prototype.reverse.call($([selector]).prevAll());

  • Hej

    “Locate all the divs in front of the last div and give them a class” should be “Locate all the divs before/preceding the last div and give them a class”

  • http://www.google.com/profiles/HeitorSalazar Heitor Salazar Baldelli

    The jQuery object does not extend all native array functions, so you must revert explicity to have the inverse order.

    Array.prototype.reverse.call($([selector]).prevAll());

    However the order returned is the expected order by the name of the method. As you should use the selected element as reference.