JQuery obtener contenido de span

Question

Estoy tratando de obtener el contenido de un lapso cuando se hace clic en un botón. Este es el 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> 

que estoy tratando de conseguirlo de manera que cuando se hace clic en el botón que obtendrá el valor del tramo. Esto es lo que estoy usando:

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

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

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

}); 

Pero la alerta siempre está mostrando: seleccionar ... nula

Answer 1

usted desea conseguir el padre primero, y luego encontrar el lapso:

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

---

Editar:Ever go back and look at code you wrote 2 years ago y gemido, "¿Por qué hice que? ". El código anterior es incómodo. En lugar de .find("> span"), debería haber usado .children("span").

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

Pero, ¿qué es un hijo de tu progenitor? ¡Un hermano! Entonces, en lugar de .parent().children("span"), debería haber usado .siblings("span").

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

Pero, mirando el HTML, que ni siquiera es necesario excavar a través de los hermanos, sabemos que es el siguiente hermano:

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

o simplemente:

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

En este punto, apenas estamos usando jQuery. Nos podríamos simplemente decir:

var span_val = this.nextSibling.innerHTML; 

Pero, tal vez ahora he hizo girar el péndulo demasiado lejos hacia otro lado?

Answer 2

No es el padre del botón. div es el padre de button y span es hijos del div. Pruebe

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

en su lugar.

Working demo

Answer 3

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

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

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

}); 

Answer 4

El span no es un elemento primario del botón '.select-location', pero el div es (en el que se encuentra el span). El uso de su margen de beneficio, intentar algo como esto:

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

Answer 5

Aquí es una demostración Jsfiddler usando 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

Dependiendo de cuántos se extiende por que tiene, pero si el lapso siempre vendrá directamente después del botón, el .next('span') funcionará.Si planeas colocar el botón en cualquier otro lugar dentro del mismo div principal, entonces necesitarás navegar el dom para encontrarlo.

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

También puede ser mejor para agregar una clase de objeto de orientación o atributo al rango de medición para apuntar mejor en caso que usted planea en un DOM más complejos o varios tramos.

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

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

Esperanza esto ayuda