2009-12-01 25 views
31

Tengo una página que contiene el siguiente elemento div:obtener un valor Div en JQuery

<div id="myDiv" class="myDivClass" style="">Some Value</div> 

¿cómo iba a recuperar el valor ("algún valor"), ya sea a través de jQuery o mediante norma JS? Intenté:

var mb = document.getElementById("myDiv"); 

Pero la consola del depurador muestra "mb is null". Me preguntaba cómo recuperar este valor.

---- ---- ACTUALIZACIÓN Cuando intento la sugerencia me sale: $ no es una función

Esto es parte de un controlador de eventos jQuery donde yo estoy tratando de leer el valor al hacer clic un botón. La función de controlador está funcionando pero no puede interpretar el valor de jQuery que parece:

jQuery('#gregsButton').click(function() { 
    var mb = $('#myDiv').text(); 
    alert("Value of div is: " + mb.value); 
}); 
+4

Re: "$ no es una función "- ¿Estás seguro de que has incluido el archivo jQuery .js? –

+2

@Chris: me gusta la forma en que usaste 'Re:';) –

+1

¿Dónde configuras ese controlador de eventos? Asegúrese de que esté en '$ (document) .ready()' o después de 'myDiv' en el cuerpo de la página (generalmente es una buena idea colocar los scripts al final). –

Respuesta

21
myDivObj = document.getElementById("myDiv"); 
if (myDivObj) { 
    alert (myDivObj.innerHTML); 
}else{ 
    alert ("Alien Found"); 
} 

Por encima de código mostrará el innerHTML, es decir, si ha utilizado etiquetas HTML dentro de div entonces mostrará incluso esos también. probablemente esto no es lo que esperabas. Así pues, otra solución es utilizar: la propiedad innerText/textContent [Gracias a bobince, ver el comentario]

function showDivText(){ 
      divObj = document.getElementById("myDiv"); 
      if (divObj){ 
       if (divObj.textContent){ // FF 
        alert (divObj.textContent); 
       }else{ // IE   
        alert (divObj.innerText); //alert (divObj.innerHTML); 
       } 
      } 
     } 
+0

Sigue recibiendo el mensaje "myDivObj" es NULL en el depurador. Me pregunto si el hecho de que el valor de este div sea dinámico y esté poblado por javaScript es la causa del problema. Es un contador que se incrementa constantemente. – GregH

+1

Era el "innerHTML" que se necesitaba. Tengo ... funciona genial. – GregH

+3

No hay ninguna propiedad como 'text', hay' textContent' (DOM Nivel 3 Core estándar) y 'innerText' (IE-only). 'text()' es el método jQuery que llama a cualquiera de esos. – bobince

54
$('#myDiv').text() 

A pesar de que sería mejor hacer algo como:

var txt = $('#myDiv p').text(); 
 
alert(txt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myDiv"><p>Some Text</p></div>

Asegúrese de que está enlazando a su archivo jQuery también :)

+1

+1 - y ¿qué pasa si 'myDiv' contiene otros elementos que también contienen nodos de texto? ¿Cómo obtendría el OP solo el texto de 'myDiv' entonces? –

+3

+1 por responder la pregunta de obtener el valor usando jQuery, ¡no solo JavaScript! – Fenton

11

si div ve así:

<div id="someId">Some Value</div> 

que podría recuperarlo con jQuery así:

$('#someId').text() 
2

Usted podría utilizar

jQuery('#gregsButton').click(function() { 
    var mb = jQuery('#myDiv').text(); 
    alert("Value of div is: " + mb); 
}); 

parece que puede haber un conflicto con el uso de los $. Recuerde que la variable 'mb' no será accesible fuera del controlador de eventos. Además, la función de texto() devuelve una cadena, no es necesario obtener mb.value.

+0

Lo siento, pero sigo siendo muy nuevo en esto ... el problema con la solución propuesta anteriormente es que ahora el depurador da me un error para la línea: var mb = jQuery ('# myDiv'). text() Decir "JQuery" no se reconoce ... es como si la biblioteca JQuery no fuera accesible desde el interior de la función. – GregH

+0

Debería haber dicho que el mensaje en el depurador es "JQuery no está definido" – GregH

1

También es posible usar innerHTML para obtener el valor dentro de la etiqueta ....

6

su div ve así:

<div id="someId">Some Value</div> 

con jQuery:

<script type="text/javascript"> 
    $(function(){ 
     var text = $('#someId').html(); 
     //or 
     var text = $('#someId').text(); 
     }; 
    </script>