Question

这是一个示例代码，

<select id="select1">
     <option value="1">Option 1 </option>
     <option value="2">Option 2 </option>
     <option value="3">Option 3 </option>
     <option value="4">Option 4 </option>
</select>
<input type="text" id="input1"/>
<select id="select2">
     <option value="1">Option 1 </option>
     <option value="2">Option 2 </option>
     <option value="3">Option 3 </option>
     <option value="4">Option 4 </option>
</select>
<input type="text" id="input2"/>

我的问题是，假设我使用jQuery来获取输入字段，即$（“＃input1”），如何在没有硬编码的情况下获取前一个表单元素？在这种情况下，它是$（“＃select1”），我不想手动浏览带有prev（），parent（），children（）等的DOM，因为我的表单结构将来可以更改（比如添加） fieldset，td，tr等。）

感谢您帮助我！

Answer 1

使用jquery prev()方法

http://api.jquery.com/prev/

$("#input1").prev();

将在输入

之前返回select元素

示例：http://jsfiddle.net/m8Tst/1/

您可以使用length属性在访问之前检查前一个元素是否存在。

Answer 2

不是问题。

//pass in the id of the current input
function selectPrev(input) {
    //find parent form, then get all descendant input-type elements
    var inputs = $("#" + input).parents("form").find("input,select,textarea");

    var prev = -1;
    //loop through list of inputs to find current input
    inputs.each(function(i, el) {
        //select previous input once current is found
        if (el.id == input) prev += i;
    })

   return inputs[prev];
}

fiddle

Answer 3

使用jQuery的.prev（）方法，但在其他表单字段中指定要查找的元素。

$("#input1").prev('select,input,textarea');

正如.prev()的文档所说：

该方法可选地接受相同类型的选择器表达式可以传递给$（）函数。如果提供选择器，前面的元素将通过测试它是否匹配来过滤选择器。

Answer 4

这不是一个简单的方法。你可以编写一个小插件来完成这项工作：

$.fn.previousFormElement = function () {

    var element = this[0],
        $formElements = $("input, select, textarea"),
        previousFormElementIndex = $formElements.index(element) - 1;

    return $formElements.eq(previousFormElementIndex);

};

请参阅Fiddle with a running example。我应该注意，只有在满足选择器previousFormElement的元素上调用"input, select, textarea"时，这才有效。另外一个好处是，如果您在页面上的第一个表单元素上运行插件，它会为您提供最后一个。

jquery获取前一个表单元素

4 个答案: