jQuery - Wybieranie następnego elementu z daną klasą

Hej,

Nie mogę sobie poradzić z pewnym zagadnieniem. Mam nadzieję, że ktoś będzie w stanie mi to wytłumaczyć, bo nie ukrywam - trochę się pogubiłem.

Mam plik php, który wypisuje elementy z bazy danych.

while (($Row = mysql_fetch_row($QueryResult)) !== FALSE) {

    echo "<div class='editWrapper'><div class='editLink'>#{$Row[0]} {$Row[1]}</div>";

    echo "<div class='editContent'><h3 class='update'>Update</h3>" .
    "<form>" . 
        "<p><strong>ID autora: </strong><input type='text' class='idAutora' name='id_autora' value='{$Row[0]}'/></p>" .
        "<p><strong>Dane autora: </strong><input type='text' class='nazwaAutora' name='nazwa_autora' value='{$Row[1]}'/></p>" .
        "<p><strong>Link autora: </strong><input type='text' class='linkAutora' name='link_autora' value='{$Row[2]}'/></p>" .
    "</form></div></div>";

}

W każdym polu do edycji znajduję się przycisk do zapisania zmian("

Update

Okej, więc do wszystkich przycisków z klasą "update" przypisałem działanie:

$('.update').click( function(){
    updateAutora();        
});

I stworzyłem funkcje updateAutora, która według mnie powinna działać tak:

 
function updateAutora(){
          
            var idAutora = $(this).next('.idAutora').val(); 
           // Kolejne wartosci...
}

Z tym że nie jestem w stanie wybrać pola input z klasa ".idAutora"(ani żadnego innego) z diva(a konkretnie z formularza) w którym został kliknięty link. Próbowałem na wiele sposobów, jednak cały czas dostaję komunikat "undefined", kiedy próbuję wypisać pobraną wartość. Jak znaleźć kolejny element z daną klasą w divie gdzie został kliknięty link? Jak dostać się do formularza i pobrać odpowiednie wartości?

Z góry dziękuję za pomoc.

Damian

this gubi się po wywołaniu każdej funkcji. Przekaż sobie to w parametrze:

updateAutora(this);

function updateAutora(obj) {
  $(obj).next(); // itd.
}

Nie pomogło w żaden sposób. Cały czas otrzymuję "undefined". Teraz wyglądało to tak:

$('.update').click( function(){

    updateAutora(this);

});

function updateAutora(obj){

    var idAutora = $(obj).next('.idAutora').val();
    alert( idAutora );

}

Może podam co generuję mój skrypt:

<div class="editWrapper">
	
	<div class="editLink">#10 Przykład 1</div>
		
	<div class="editContent" style="display: block;">
		
		<h3 class="update">Update</h3>
		
		<form>
			
			<p><strong>ID autora: </strong><input type="text" class="idAutora" name="id_autora" value="10"></p>
			<p><strong>Dane autora: </strong><input type="text" class="nazwaAutora" name="nazwa_autora" value="Przyklad 1"></p>
			<p><strong>Link autora: </strong><input type="text" class="linkAutora" name="link_autora" value="przyklad_1.php"></p>
		
		</form>
	
	</div>

</div>

To jest tylko przykładowe pole, jest ich oczywiście więcej.

.find zamiast .next?

Nie, już próbowałem ;-)

W którym miejscu wczytujesz plik js? Używasz $(document).ready()?

Plik .js wczytywany jest po wykonaniu skryptu .php. Dla pewności, że problem nie leży po tej stronie ustawiłem setTimeout na kilka sekund, aby przeprowadzić dodatkowe testy - nic to nie dało. Elementy są dodane prawidłowo do DOM.

Dla przykładu - jeżeli dam:

$('.update').click( function(){

    updateAutora(this);

});

function updateAutora(obj){

    var idAutora = $('.idAutora').val();
    alert( idAutora );
}

To zawsze otrzymam prawidłową wartość pierwszego elementu z klasą ".idAutora". Działa jak należy. Jeżeli zmienie na:

$('.update').click( function(){

    updateAutora(this);

});

function updateAutora(obj){

    var idAutora = $('.idAutora').last().val();
    alert( idAutora );
}

To zawsze otrzymam prawidłową wartość ostatniego elementu z klasą ".idAutora".

Wydaję mi się, że będę musiał pokombinować z funkcjami closest, nextAll oraz parents. Chociaż z eksperymentów, które przeprowadziłem na razie nic nie wyszło. Wynika to pewnie z tego, że nie do końca wiem co robię. Nauka na błędach najlepsza jak to mówią ;-)

Pozdrawiam.

Ok, w ogóle nie patrzyłem jak wygląda Twój kod HTML, zauważyłem ten jeden problem i założyłem, że reszta jest OK.

Poczytaj sobie WSZYSTKIE (tak, musisz poświęcić nawet godzinę na to, jeżeli chcesz osiągnąć cokolwiek sensownego kiedykolwiek) funkcje do chodzenia po DOM w jQuery, a tymczasem krótkie wyjaśnienie. Tu jest Twoje drzewo, coś takiego możesz zobaczyć w Narzędziach Developerskich przeglądarki (jeżeli nie wiesz coś takiego to odsyłam do Google, w większości przeglądarek uruchomisz to przez F12, albo klikając dowolny element HTML (z wyjątkiem wtyczek typu Flash i elementów oskryptowanych własnym menu kontekstowym) i wybierając coś w rodzaju "Zbadaj element":

Powiedz mi - czy Twój input leży OBOK (konkretnie za) elementem h3. Obok = na tej samej głębokości. Nie, obok h3 jest jedynie form. W formie z kolei dość głęboko jest ten Twój input. Wobec tego najszybszą metodą do dostania się do tego inputa będzie $(this).next().find('.idAutora'), samo $(this).next() przechodzi do formy, a find wyszukuje w formie wgłąb.

Działa jak należy. Wydawało mi się, że taką kombinację już próbowałem - jednak chyba nie do końca ;-)

Dziękuję wszystkim za poświęcony czas i oczywiście za pomoc w rozwiązaniu mojej zagadki.

Pozdrawiam,
Damian

Błagam, nie rozwiązuj problemów poprzez stosowanie "kombinacji". Jeżeli stosowałeś więcej niż 2 to już znak, że próbujesz programować losowo pisząc znaki, bo "może zadziała" - w taki sposób szybko skończysz źle.