jQuery API

.prev()

Categories: Traversing > Tree Traversal

.prev( [selector] ) Returns: jQuery

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

  • version added: 1.0.prev( [selector] )

    selectorA string containing a selector expression to match elements against.

Given a jQuery object that represents a set of DOM elements, the .prev() method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.

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

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>

To select the element that comes immediately before item three:

$('li.third-item').prev().css('background-color', 'red');

The result of this call is a red background behind item 2. Since no selector expression is supplied, this preceding element is unequivocally included as part of the object. If one had been supplied, the element would be tested for a match before it was included.

If no previous sibling exists, or if the previous sibling element does not match a supplied selector, an empty jQuery object is returned.

To select all preceding sibling elements, rather than just the preceding adjacent sibling, use the .prevAll() method.

Examples:

Example: Find the very previous sibling of each div. 

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:40px; height:40px; margin:10px;
        float:left; border:2px blue solid; 
        padding:2px; }
  span { font-size:14px; }
  p { clear:left; margin:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div><span>has child</span></div>

  <div></div>
  <div></div>
  <div></div>
  <div id="start"></div>

  <div></div>
  <p><button>Go to Prev</button></p>
<script>
    var $curr = $("#start");
    $curr.css("background", "#f99");
    $("button").click(function () {
      $curr = $curr.prev();
      $("div").css("background", "");
      $curr.css("background", "#f99");
    });

</script>

</body>
</html>

Demo:

Example: For each paragraph, find the very previous sibling that has a class "selected". 

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div><span>Hello</span></div>

  <p class="selected">Hello Again</p>
  <p>And Again</p>
<script>$("p").prev(".selected").css("background", "yellow");</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .prev() 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 .prev()? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

* All fields are required
  • http://pseudocodice.com/ Luca Matteis

    prev() and next() don’t return the previousSibling if the previousSibling is a Text Node. How do I fix this?

  • http://www.learningjquery.com/ Karl Swedberg

    jQuery skips over text nodes for all of its traversal methods ( except .contents() ). If you need to access the previous sibling, regardless of nodeType, you can access the DOM node and then use the .previousSibling property. For example, $('li')[2].previousSibling returns the previous sibling of the third li. You might want to skip over comment nodes. Also, you should probably check that the DOM element exists before checking the .previousSibling property or you'll get an error.

  • http://www.doublerebel.com Charles Phillips

    When .prev() is called on a :first-child element it returns an empty array. I would personally prefer that in that case, .prev() returns null, as node.previousSibling does in the same case. .next() on a :last-child behaves in the same way, so it may be by design. Regardless I think the docs should state what is returned in the case that no element matches the request.

  • http://www.learningjquery.com/ Karl Swedberg

    Hi Charles,
    You can find that information by clicking the “Returns: jQuery” link at the top of the entry (in the blue bar):

    “A jQuery object may be empty, containing no DOM elements. You can create an empty jQuery object with $() (that is, passing no arguments at all). A jQuery object may also be empty if a selector doesn’t select any elements, or if a chained method filters out all the elements. It is not an error; any further methods called on that jQuery object simply have no effect since they have no elements to act upon.”

    (emphasis added)

  • Benpierce23

    Found it…. How to tell if an element exists…

    http://jqueryfordesigners.com/element-exists/

  • Benpierce23

    How do you test to see if there is a previous sibling? For example

    if ($(this).prev()) {
    do something
    }

    OR

    if ($(this).previousSibling) {
    do something
    }

    Niether seem to work for me as they both return true to the if statement even if this is at the top of the list in the siblings.

  • Connor Mckelvey

    if there a way to use each() and prev() together to select all the previous elements?

  • alexander

    if($(“…”).length != 0)

  • alexander

    if($(“…”).length != 0)

  • 梦三秋

    good！DEMO is very clear to understand the method .prev()