.prev(selector) not working

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?

Live links are a great *adjunct* to a question, but always post the relevant code *in the question* as well. Two reasons. 1. People shouldn't have to follow a link to help you. 2. StackOverflow is meant to be a resource not just for you now, but for others having a similar issue in the future. External links can get moved, modified, deleted, etc. By making sure the relevant code is in the question, we ensure that the question (and its answers) remain useful for a reasonable period of time. — T.J. Crowder, Jul 26 '11 at 04:08

score 5 · Accepted Answer · edited May 23 '17 at 11:54

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

I hate this about jQuery. `prev` with a selector is just about worthless -- and even worse, confusing, as this question suggests. It doesn't seem to follow the mental model of jQuery in general. — Reid, Jul 26 '11 at 04:07
@Reid: jQuery's great, but don't get me started on API weirdnesses... ;-) This one bit me when I started with jQuery as well. — T.J. Crowder, Jul 26 '11 at 04:09
@qwertymk: that's because the previous tag is `
` in your example. See it [without the `
` in the way](http://jsfiddle.net/vWafe/5/). — Reid, Jul 26 '11 at 04:18

score 2 · Answer 2 · answered Jul 26 '11 at 04:06

You are looking for $(selector).prevAll('.className:first');

.prev() only checks to see if the previous element matches the selector.

.prevAll() selects all previous siblings, you want to select the first element in that list, that's why I added the :first as well.

http://jsfiddle.net/Paulpro/vWafe/2/

score 0 · Answer 3 · answered May 07 '17 at 20:46

all answers are good but I want to share with you how I used it

imagine you have those two selectors a.ref, sup

if you used first() you will get the first occurrence of selectors a.ref or sup

what if I want to get the first occurrence of both selectors a.ref and sup

here how I solved it

var prev_author_selector_to_remove="a.ref, sup";
if(prev_author_selector_to_remove) {
            prev_author_selector_to_remove.split(",").forEach(function (singleSelector) {
                $authorNames.eq(i).prevAll(singleSelector).first().addClass("hidden");
            });
        }

and another thing

what if you want all previous(not first) until(not all) you find some selector to stop on

here is it

var prev_author_selector_to_remove="a.ref, sup";
var stop_selector=".author"
if(prev_author_selector_to_remove) {
            prev_author_selector_to_remove.split(",").forEach(function (singleSelector) {
                $authorNames.eq(i).prevUntil(stop_selector,singleSelector).addClass("hidden");
            });
        }

the same thing apply to next()

var next_author_selector_to_remove=".defaultSize";
var stop_selector=".author"
if(next_author_selector_to_remove) {
            next_author_selector_to_remove.split(",").forEach(function (singleSelector) {
                $authorNames.eq(i).nextUntil(stop_selector,singleSelector).addClass("hidden");
            });
        }

hope my case help you

.prev(selector) not working

3 Answers3

Linked