Question

Here’s the problem (live copy ):

CSS:

div {
    border: 1px solid black;
}

HTML:

<div>.</div><br>
<div>.</div><br>
<div class="test">Should have a blue border</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>

JavaScript:

$('div:last').css('border', '1px solid red')
    .prev('.test').css('border', '1px solid blue');

It seems that when I do $(selector).prev(.className) or $(selector).prev(tag.className) I get an empty set. What’s wrong with this?

Answer 1

prev only looks back one sibling, and returns either a set containing that sibling if it’s a match for the selector, or an empty set if it isn’t a match. You want prevAll, which searches backward through the siblings looking for matches, possibly combined with first or :first.

Like this (live copy):

$('div:last').css('border', '1px solid red')
    .prevAll('.test').first().css('border', '1px solid blue');

There I’ve used first (the function) rather than :first (the selector). Counter-intuitively (to me), it’s faster, since it can hand the prevAll part off to native code in most browsers (more in this other SO question and answer), but only if we don’t use jQuery-specific extensions like :first.

To understand why prev is defined the way it is, you have to remember how set-based jQuery is. Looking at an entire set of elements, prev returns a new set of the immediate sibling of each of those elements provided it matches the given selector. So for instance, consider this (live copy):

CSS:

div {
  border: 1px solid black;
  margin-bottom: 2px;
}

HTML:

<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="foo">foo</div>
<div class="bar">bar</div>
<div>not foo</div>
<div class="bar">bar</div>
<div class="foo">foo</div>
<div class="bar">bar</div>
<div>not foo</div>
<div class="bar">bar</div>
<div class="foo">foo</div>
<div class="bar">bar</div>

JavaScript:

jQuery(function($) {

  $("div.bar")
    .css("background-color", "#ffffcc")
    .prev(".foo")
    .css("background-color", "#ccffcc");

});

The initial $("div.bar") matches six elements in different locations in the page. We set their background colors, and then get their previous siblings if those siblings have the class “foo”; our new set only has four elements, because only four of the immediate previous siblings had that class. Then we set their backgrounds to green.

prev seems largely useless when you’re dealing with individual elements, but its value makes sense when you look at things from a set perspective. (jQuery is so set-based that for ages I assumed the name “jQuery” was because it’s like SQL [the Structured Query Language], which is also massively set-based; but Resig says that’s not the case.)