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/

一个类型的jQuery .prev（），无论它是父类等

3 个答案:

用法：