javascript - .prev(selector) not working - Stack Overflow

admin管理员组

文章数量:1404923

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?

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?

• javascript
• jquery

Share Improve this question Follow edited Jul 27, 2011 at 14:38 T.J. Crowder 1.1m200200 gold badges2k2k silver badges2k2k bronze badges asked Jul 26, 2011 at 4:03 qwertymkqwertymk 35.4k3030 gold badges124124 silver badges184184 bronze badges 2

• 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 Commented Jul 26, 2011 at 4:08
• sigh Fine, I'll do it for you. – T.J. Crowder Commented Jul 27, 2011 at 14:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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/Paulpro/vWafe/2/

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

本文标签： javascriptprev(selector) not workingStack Overflow