jQuery .prev() of a type regardless of it's parent etc

问题

is there a simple way to get the previous occurrence of an element in the DOM? If I'm looking at #text3 and I want to get ahold of the previous input #text2.

<div>
    <input id="text1" type="text" value="text1" />
</div>

<div>
    <p>Choose your race!</p>
    <input id="text2" type="text" value="text2" />
</div>

<div>
    <div class="labeledField">
        <label>Text 3:</label>
        <input id="text3" type="text" value="text3" />
    </div>
</div>

.prev('input') doesn't work cause it's within the parent and .prevAll('input') seems to only search the parent as well... Am I missing something here? This feels like it should be much easier than $('#text3').parent().prev().find('input') :D

回答1:

You can use $.index(), like so:

var previous = null;
var inputs = $('input');
var index = inputs.index(this);
if (index > 0) {
    previous = $(inputs[index-1])
}

For example: http://jsfiddle.net/pYaBL/1/

回答2:

I've created a new jQuery plugin which returns the "real" previous input element. Include this code:

(function($){
    $.fn.realPrev = function(selector){
        var thisElem = this.get(0); //Get DOM element for comparison
        var lastElement, foundElement = null;
        $(selector).each(function(){
            if(this == thisElem){
                foundElement = lastElement;
                return false;
            }
            lastElement = this;
        });
        return $(foundElement);
    }
})(jQuery);

Usage:

$("#input3").realPrev("input");

Fiddle: http://jsfiddle.net/QWRWh/

回答3:

Both other answers assume that the element you are using is of the same type of the element you're looking for. If it's arbitrary, this should work (performance not be great on larger files).

Sort of combining the two other answers:

(function($){
    $.fn.realPrev = function(selector){
        var all = $("*");

        return all.slice(0,all.index(this)).filter(selector).last();
    }
})(jQuery);

http://jsfiddle.net/QWRWh/1/

来源：https://stackoverflow.com/questions/7771119/jquery-prev-of-a-type-regardless-of-its-parent-etc

标签

javascript

jquery

html

dom

sizzle