[JQuery] Selezionare l'ultimo elemento

Printable View

07-08-2012, 21.45.11

[JQuery] Selezionare l'ultimo elemento

Ciao a tutti, ho una serie di bottoni devo fare in modo che selezionando l'ultimo bottone mi crea un bottone successivo...
es.

Codice PHP:

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ var response = 0; for(var i=1;i<4;i++){ $(".s").append('<button type="button" class="button_'+i+'">'+i+'</button>'); } response = 3; $(document).on("click", ".button_"+response, function(){ if(response < "10"){ response++; $(".s").append('<button type="button" class="button_'+response+'">'+response+'</button>'); } }); }); </script> </head> <body> <div class="s"></div> </body> </html>
09-08-2012, 13.20.25
EuroSalute

Guarda se è quello che vorresti fare, provalo:

Codice HTML:

<script> $(function(){ var response = 3; var s=$(".s",this); for(var i=1;i<=response;i++){ $(".s").append('<input type="button" value="'+i+'" class="s_button">'); } var s_button=$(".s .s_button",this); //$([s.get(0)]).bind("click", function(){ $([s_button.get(2)]).bind("click", function(){ if (response<10){ response++; //test: alert(s_button.attr("value")+' | '+response); $(".s").append('<input type="button" value="'+response+'" class="s_button">'); } }); }); </script>
09-08-2012, 14.19.22

Ti ringrazio di aver risposto, io volevo fare in modo che premendo sull'ultimo pulsante venga creato un nuovo pulsante...
es.
Ho 3 pulsanti, premo sul terzo pulsante viene creato il quarto pulsante cliccando sul quarto pulsante dovrebbe crearsi il quinto e cosi via...
09-08-2012, 15.59.00

Sono contrario al codice pronto ma ...

...prova questo:

Codice PHP:

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> var e = 0; function crea(nr, el) { for(var c = 0; c < nr; c++) { e++; $('#' + el).append('<button type="button" class="miaclasse" id="btn_' + e + '">' + e + '</button>'); } } $(document).ready(function(){ crea(3, 's'); $(document).click(function(event) { var tgt = $(event.target); if($(tgt).hasClass('miaclasse')) { if( $(tgt).attr('id') == 'btn_' + e) { crea(1, 's'); } } }); }); </script> </head> <body> <div id="s"></div> </body> </html>

Non capisco come usi l'attributo class. Non ha senso dare una classe diversa ad ogni elemento (unione del contatore). Semmai usa ID.
09-08-2012, 19.48.34

Ti ringrazio funziona, una cosa modificando lo script in questo modo...

Codice PHP:

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> var e = 0; function Make_input(nr,el){ for(var c=0;c<nr;c++){ e++; $('#'+el).append('<input type="text" class="miaclasse" id="btn_'+e+'" value="btn_'+e+'"><br>'); }} $(document).ready(function(){ Make_input(3,'s'); $(document).click(function(event){ if(e < "10"){ var tgt = $(event.target); if($(tgt).hasClass('miaclasse')){ if($(tgt).attr('id') == 'btn_' + e){ Make_input(1,'s'); }}}}); $(document).focus(function(event){ if(e < "10"){ var tgt = $(event.target); if($(tgt).hasClass('miaclasse')){ if($(tgt).attr('id') == 'btn_' + e){ Make_input(1,'s'); }}}}); }); </script> </head> <body> <div id="s"></div> </body> </html>

Non capisco perché applicando il focus non viene creato l'elemento.
p.s.
Mi potresti spiegare questa parte... :=):

Codice PHP:

var tgt = $(event.target);
10-08-2012, 11.55.42

Ecco perchè la pappa pronta fa male.

Utilizzare codice bello e pronto e, soprattutto, modificarlo senza sapere che si fa, produce danno.
Quando chiedi cosa vuol dire una riga (var tgt = $(event.target);) dimostri in pieno di non aver capito tutto il resto.

Dunque, essendo la pagina creata dinamicamente (lato client, quindi con interventi JS sul DOM), non per avere l'effetto richiesto (il listener solo sull'ultimo elemento di una serie) dovresti, ad ogni modifica, togliere il listener per l'oggetto che l'aveva e riassegnarlo al nuovo "ultimo".
Per evitare ciò, ti avevo proposto una applicazione della coseddetta event delegation, ovvero catturare l'evento (click) sul documento, e solo qualora il click sia fatto su uno specifico elemento (il target) allora accadeva un qualcosa (aggiunta di un elemento).

Ora se avessi capito questo, non avresti neppure pensato a fare la moficia che hai fatto, in quanto l'evento focus sul documento ce lo hai sempre, il documento, in pratica, non perde mai il focus quandi non si verificherà mai il nuovo e quindi l'azione collegata.

Se il tuo scopo era quello di aggiungerlo al focus (che poi non capisco il perchè, visto che potresti selezionare il campo e poi lasciarlo senza scrivere nulla e allora? Cancelli il nuovo campo creato e ricrei tutti i listener?), tutta la costruzione non va più bene.

Ma questa volta, sta a te provare una strada ...
13-08-2012, 13.59.38

Mi spiego bene, ho 3 campi input.
Se clicco o applico l'effetto focus sui primi 2 campi non dovrebbe succedere niente, se clicco o applico l'effetto focus sull'ultimo campo cioè il 3 anche se è vuoto dovrebbe crearmi un altro campo cosi a susseguirsi fino a quanto i campi non sono 10.
Cioè i due eventi click e focus devo essere applicati solo sull'ultimo campo, come posso togliere il listener sull'ultimo campo e assegnarlo al nuovo campo creato?
Ed infine il decimo campo non dovrebbe più avere il listener...

Mi potresti dare una mano... ;)