1. Dom
  2. Pytanie i odpowiedź
  3. Najlepszy sposób na znalezienie elementu wejściowego "następnego" formularza w jQuery?

Najlepszy sposób na znalezienie elementu wejściowego "następnego" formularza w jQuery?

2008-11-14 11 views
35

Korzystając z jQuery, jaki jest najlepszy sposób na znalezienie następnego elementu formularza na stronie, zaczynając od dowolnego elementu? Kiedy mówię element formularza mam na myśli <input>, , <button> lub <textarea>.Najlepszy sposób na znalezienie elementu wejściowego "następnego" formularza w jQuery?

W poniższych przykładach element o identyfikatorze "this" jest arbitralnym punktem początkowym, a element o identyfikatorze "next" jest tym, który chcę znaleźć. Ta sama odpowiedź powinna działać dla wszystkich przykładów.

Przykład 1:

<ul> 
<li><input type="text" /></li> 
<li><input id="this" type="text" /></li> 
</ul> 

<ul> 
<li><input id="next" type="text" /></li> 
</ul> 

<button></button>

Przykład 2:

<ul> 
<li><input id="this" type="text" /></li> 
</ul> 

<button id="next"></button>

Przykład 3:

<input id="this" type="text" /> 
<input id="next" type="text" />

Przykład 4:

<div> 
    <input id="this" type="text" /> 
    <input type="hidden" /> 
    <div> 
    <table> 
     <tr><td></td><td><input id="next" type="text" /></td></tr> 
    </table> 
    </div> 
    <button></button> 
</div>

EDYCJA: Dwie dotychczasowe odpowiedzi wymagają wpisania numeru sekwencyjnego do wszystkich elementów wejściowych na stronie. Jak wspomniałem w komentarzach jednego z nich, jest to rodzaj tego, co już robię i wolałbym mieć rozwiązanie tylko do odczytu, ponieważ będzie to działo się wewnątrz wtyczki.

Źródło

2008-11-14 Anonymous

Odpowiedz

51

kudos,

Co z wykorzystaniem .index?

np $(':input:eq(' + ($(':input').index(this) + 1) + ')');

Źródło

2008-11-15 02:04:31 redsquare

+0

To działa świetnie. Dzięki redsquare, bobbytek4 i grault na freenode # jquery za ich pomoc. –

+8

Odfiltruj wyłączone pola $ (": input: not (: disabled): eq (" + ($ (": input: not (: disabled)"). Index (currentElement) + 1) – Sentient

+5

Potrzebowałem dodać kolejne zestaw parens, w przeciwnym razie wykonał ciąg konkat na indeksie: Zakończony z: $ (": input: eq (" + ($ (": input"). index (this) + 1) + ")"); –

2

Można nadać każdemu elementowi formularza identyfikator (lub unikalną nazwę klasy), który zidentyfikował go jako element formularza, a także nadał mu indeks. Na przykład:

<div> 
    <input id="FormElement_0" type="text" /> 
    <input id="FormElement_1" type="text" /> 
<div>

Następnie, jeśli chcesz, aby przechodzić od pierwszego elementu do drugiego można zrobić coś takiego:

//I'm assuming "this" is referring to the first input 

//grab the id 
var id = $(this).attr('id'); 

//get the index from the id and increment it 
var index = parseInt(id.split('_')[0], 10); 
index++; 

//grab the element witht that index 
var next = $('#FormElement_' + index);

Korzyść z tego jest to, że można oznaczyć dowolny element do Bądź następny, niezależnie od lokalizacji i typu. Możesz także kontrolować kolejność swoich przemian. Tak więc, jeśli z jakiegoś powodu chcesz pominąć element i wrócić do niego później, możesz to zrobić.

Źródło

2008-11-14 16:16:52 jckeyes

+0

Dzięki za odpowiedź. To jest niestety dokładnie to, czego staram się pozbyć :) Przenoszę swój kod do wtyczki i wolałbym, żeby był użyteczny bez przekręcenia własnego identyfikatora użytkownika. Unikalna nazwa klasy jest interesująca, ale jeśli to możliwe, wolę bardziej "tylko do odczytu". –

+0

Zrozumiałe. Rozumiem, że dostarczone przeze mnie rozwiązanie było trochę "brudne". Ma mniej sensu z punktu widzenia wtyczki. – jckeyes

1

Lub możesz użyć atrybutu html "tabindex", który jest dla użytkownika, gdy kartę wokół formularza, przechodzi do tabindex = "i" do tabindex = "i + 1". Możesz użyć jQuery, aby uzyskać atrybut bardzo łatwo. Zrobiłoby to miły powrót do użytkowników bez włączonego javascript, również.

Źródło

2008-11-14 16:28:58

+1

Czy tabulatory tabulatorów nie mogą ominąć liczby? – mpen

1

wymyśliłem funkcji, która wykonuje prace bez indeksów wyraźnie określających:

function nextInput(form, id) { 
    var aInputs = $('#' + form).find(':input[type!=hidden]'); 
    for (var i in aInputs) { 
     if ($(aInputs[i]).attr('id') == id) { 
      if (typeof(aInputs[parseInt(i) + 1]) != 'undefined') { 
       return aInputs[parseInt(i) + 1]; 
      } 
     } 
    } 
}

A oto przykład roboczych. Znaczniki formularza są spójne. Wszystko, czego naprawdę potrzebujesz, to wspólny rodzic i może nawet użyć tagu body jako elementu nadrzędnego (z niewielkimi modyfikacjami funkcji).

Wklej to do pliku i otwarty z Firefox/Firebug i zobaczysz zwraca poprawny element dla wszystkich przykładów:

<html> 
    <head> 
    <script src="http://www.google.com/jsapi"></script> 
    <script> 
     function nextInput(form, id) { 
     var aInputs = $('#' + form).find(':input[type!=hidden]'); 
     for (var i in aInputs) { 
      if ($(aInputs[i]).attr('id') == id) { 
      if (typeof(aInputs[parseInt(i) + 1]) != 'undefined') { 
       return aInputs[parseInt(i) + 1]; 
      } 
      } 
     } 
     } 

     google.load("jquery", "1.2.6"); 
     google.setOnLoadCallback(function() { 
     console.log(nextInput('myform1', 'this1')); 
     console.log(nextInput('myform2', 'this2')); 
     console.log(nextInput('myform3', 'this3')); 
     console.log(nextInput('myform4', 'this4')); 
     }); 
    </script> 
    </head> 
    <body> 
    <form id="myform1"> 
     <ul> 
     <li><input type="text" /></li> 
     <li><input id="this1" type="text" /></li> 
     </ul> 
     <ul> 
     <li><input id="next1" type="text" /></li> 
     </ul> 
    </form> 

    <form id="myform2"> 
     <ul> 
     <li><input type="text" /></li> 
     <li><input id="this2" type="text" /></li> 
     </ul> 
     <ul> 
     <li><input id="next2" type="text" /></li> 
     </ul> 
    </form> 

    <form id="myform3"> 
     <input id="this3" type="text" /> 
     <input id="next3" type="text" /> 
    </form> 

    <form id="myform4"> 
     <div> 
     <input id="this4" type="text" /> 
     <input type="hidden" /> 
     <div> 
     <table> 
      <tr><td></td><td><input id="next4" type="text" /></td></tr> 
     </table> 
     </div> 
     <button></button> 
     </div> 
    </form> 
    </body> 
</html>

Źródło

2008-11-15 05:56:37 enobrev

+0

Pytanie wyraźnie stwierdza: ,