.prev(selector) Not Working

Here's the problem (live copy ): CSS: div { border: 1px solid black; } HTML:

.

.

Shou

Solution 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:

<divclass="foo">foo</div><divclass="bar">bar</div><divclass="foo">foo</div><divclass="bar">bar</div><div>not foo</div><divclass="bar">bar</div><divclass="foo">foo</div><divclass="bar">bar</div><div>not foo</div><divclass="bar">bar</div><divclass="foo">foo</div><divclass="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.)

Solution 2:

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/

Solution 3:

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

Share