Iterate su ciascun elemento di pari livello

Question

Contesto: Sto costruendo un modulo e uno script che eseguirà una query ajax, basata sul clic su un pulsante specifico. Esistono più blocchi div con elementi della stessa classe e in base al blocco div in cui viene fatto clic su un pulsante, verranno elaborate forme diverse.

Come parte dell'inizio del programma, ho iniziato con una chiamata jQuery apparentemente semplice.

Sto tentando di aggiungere un evento onclick a una classe specifica e quindi di cercare di ottenere il valore CSS dei fratelli di quell'elemento.

Errore: Ricevo un errore che indica che TypeError: this.siblings is undefined.

Domanda: Qual è il modo corretto per iterare sui fratelli di un elemento utilizzando jQuery?

Il mio codice:

HTML:

<a class="btn LiveStatsBtn"><span class="btn-label">Get Stats now</span> </a> 

JavaScript:

$(document).ready (function() 
{ 
    $('.LiveStatsBtn').click(function(){ 
     this.siblings.each(function() { 
      var tx=this.css(); 
      alert(tx); 
     }); 
    }); 
}); 

Answer 1

In un gestore di eventi jQuery, this riferisce all'elemento DOM, e non è un oggetto jQuery. Bisogna avvolgerlo in una:

$(this).siblings().each(function() { 
    // ... 
}); 

Si noti inoltre che "fratelli" è una funzione, quindi bisogna chiamare per ottenere un nuovo oggetto jQuery che avvolge i fratelli elemento.

Answer 2

siblings è una funzione, quindi ha bisogno di parentesi:

$(document).ready (function() 
{ 
    $('.LiveStatsBtn').click(function(){ 
     $(this).siblings().each(function() { 
      var tx=$(this).css(); 
      alert(tx); 
     }); 
    }); 
}); 

http://api.jquery.com/siblings/