JQuery получить предыдущий элемент формы

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"), я не хочу вручную перемещаться по DOM с помощью prev (), parent (), children () и т. Д., Потому что моя структура формы может измениться в будущем (например, добавить fieldset, td, tr и др.)

Спасибо за помощь!

Answer 1

используйте метод jquery prev()

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

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

вернет элемент выбора до ввода

Образец: 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];
}​

скрипка

Answer 3

Не простой способ в этом.Вы можете написать небольшой плагин для выполнения этой работы:

$.fn.previousFormElement = function () {

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

    return $formElements.eq(previousFormElementIndex);

};

См. Fiddle с работающим примером .Я должен отметить, что это работает, только если вы вызываете previousFormElement для элемента, который удовлетворяет селектору "input, select, textarea".Дополнительным бонусом является то, что если вы запустите плагин на первом элементе формы на странице, он даст вам последний.

Answer 4

Используйте метод .prev () jQuery, но укажите элементы, которые вы хотите, чтобы он искал, в вашем случае другие поля формы.

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

Как указано в документации для .prev () :

Метод дополнительно принимает выражение селектора того же типа это можно передать в функцию $ (). Если селектор поставляется, предыдущий элемент будет отфильтрован путем проверки его соответствия селектор.