JQuery ottiene il contenuto dell'intervallo

Question

Sto cercando di ottenere il contenuto di un intervallo quando si fa clic su un pulsante. Questo è il codice html:

<div class="multiple-result"> 
<button class="select-location" id="168">Select</button> 
<span>Athens, Greece</span> 
</div> 

<div class="multiple-result"> 
<button class="select-location" id="102">Select</button> 
<span>Athens, Georgia, USA</span> 
</div> 

Sto cercando di farlo in modo che quando viene cliccato il pulsante che otterrà il valore della campata. Questo è quello che sto usando:

$('button.select-location').live('click', function(event){ 

    // set the span value 
    var span_val = $(this).parent("span").html(); 

    alert('selecting...' + span_val); 

}); 

Ma l'allarme è sempre mostrando: selezione ... nulla

Answer 1

si desidera ottenere il genitore prima, poi trovare l'arco:

var span_val = $(this).parent().find("> span").html(); 

---

Edit:Ever go back and look at code you wrote 2 years ago e gemere: "Perché l'ho fatto che? ". Il codice precedente è imbarazzante. Invece di .find("> span"), avrei dovuto usare .children("span").

var span_val = $(this).parent().children("span").html(); 

Ma, che cos'è un figlio di tuo padre? Un fratello! Quindi, invece di .parent().children("span"), avrei dovuto usare .siblings("span").

var span_val = $(this).siblings("span").html(); 

Ma, guardando il codice HTML, non abbiamo nemmeno bisogno di scavare attraverso i fratelli, sappiamo che è il fratello successivo:

var span_val = $(this).next("span").html(); 

o semplicemente:

var span_val = $(this).next().html(); 

A questo punto, stiamo usando a malapena jQuery. Noi potremmo solo dire:

var span_val = this.nextSibling.innerHTML; 

Ma, forse ora ho oscillato troppo lontano l'altro modo?

Answer 2

Non è genitore del pulsante. div è padre di button e span è figlio di div. Prova

var span_val = $(this).parent().children("span").html(); 

invece.

Working demo

Answer 3

$('button.select-location').live('click', function(event){ 

    var span_val = $(this).next("span").html(); 

    alert('selecting...' + span_val); 

}); 

Answer 4

Lo span non è un genitore del pulsante ".seleziona", ma il div è (in cui si trova lo span). Utilizzando il markup, provare qualcosa di simile:

var spanVal = $(this).parent('.multiple-result').find('span').html(); 

Answer 5

Ecco una demo Jsfiddler utilizzando jQuery next

http://jsfiddle.net/vVK54/1/

$('button.select-location').live('click', function(event){  
    // set the span value 
    var span_val = $(this).next().html(); 
    alert('selecting...' + span_val); 
}); 

Answer 6

A seconda di quanti si estende che hai, ma se la durata sarà sempre venire direttamente dopo il pulsante, funzionerà lo .next('span').Se prevedi di posizionare il pulsante in qualsiasi altro posto all'interno della stessa div genitore, dovrai spostarti nella dom per trovarlo.

$('selector').click(function() { 
    $(this).parent().find('span'); 
)}; 

Inoltre può essere meglio per aggiungere una classe targeting o attributo a campata di indirizzare meglio in caso si ha intenzione di un DOM più complesso o più campate.

<span class='clicktarget'>Text Here</span> 

$('button.select-location').click(function() { 
    var span_val = $(this).parent('div').find('span.clicktarget').html(); 
}); 

Spero che questo aiuti