jquery获取上一个表单元素

Posted 2023-05-09

【中文标题】jquery获取上一个表单元素

【英文标题】：jquery get previous form element

【发布时间】：2012-04-03 02:08:36

【问题描述】：

这是一个示例代码，

<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，因为我的表单结构将来可能会改变（比如添加字段集、td、tr 等）

谢谢你帮助我！

【问题讨论】：

我不明白你的问题。你想获取之前的表单元素，但又不想使用 prev()，因为事情会改变？？？如果是这样，您认为“前一个表单元素”是什么？

@Steve，表单元素可能被fieldsets 或类似的分隔。

【参考方案1】：

使用 jquery prev() 方法

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

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

将在输入之前返回选择元素

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

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

【讨论】：

不过他不想使用 prev。

对不起，我的问题没有弄清楚，我的意思是我可以使用 .prev() 但我不想手动遍历 DOM，因为我的表单结构可能会改变。请看小提琴jsfiddle.net/rocker_9x/bCCpb/1

@user826224: 你想要上一个 td 中的元素吗？你必须更清楚地定义你的要求

【参考方案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

【参考方案3】：

使用 jQuery 的 .prev() 方法，但指定您希望它查找的元素，在您的情况下为其他表单字段。

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

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

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

【讨论】：

我按照你说的做，但它只显示'未定义'jsfiddle.net/rocker_9x/bCCpb/1

啊，好吧，您最近的 jsFiddle 中的结构与原始结构不同，因此 .prev() 不起作用，因为 select 不是输入的前一个元素。您需要通过 prev、parent 等的上下路径来完成您需要的操作。

【参考方案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。我应该注意，这仅在您在满足选择器"input, select, textarea" 的元素上调用previousFormElement 时才有效。一个额外的好处是，如果您在页面上的第一个表单元素上运行插件，它会给您最后一个。