javascript - jQuery .prev() 的类型，无论它是父级等

Question

有没有一种简单的方法来获取 DOM 中元素的先前出现？如果我正在查看#text3并且我想获取先前的输入#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')不起作用，因为它在父级内，并且.prevAll('input')似乎也只搜索父级......我在这里遗漏了什么吗？这感觉应该比$('#text3').parent().prev().find('input'):D容易得多

Answer 1

你可以$.index()像这样使用：

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

例如：http: //jsfiddle.net/pYaBL/1/

Answer 2

我创建了一个新的 jQuery 插件，它返回“真实”的先前输入元素。包括此代码：

(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);

用法：

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

小提琴：http: //jsfiddle.net/QWRWh/

Answer 3

其他两个答案都假定您正在使用的元素与您正在寻找的元素的类型相同。如果它是任意的，这应该可以工作（大文件的性能不是很好）。

将其他两个答案结合起来：

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

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

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