¿Cómo obtengo el valor de un <span> usando jQuery?


149

Esto es basico.

¿Cómo obtengo el valor 'Este es mi nombre' del intervalo anterior?

<div id='item1'>
<span>This is my name</span>
</div>

Respuestas:


299

Creo que este debería ser un ejemplo simple:

$('#item1 span').text();

o

$('#item1 span').html();

1
¿Dónde encuentro esas funciones jQuery?
Felipe Barreiros

25
Creo que es importante al mostrar estas dos funciones que no confundamos a los nuevos codificadores al sugerir que hagan lo mismo, cuando no lo hacen (aunque en este ejemplo lo parecerá). Es importante tener en cuenta que .text()html codificará cualquier carácter que encuentre, mientras .html()que no codificará ningún carácter.
VoidKing

¿Se puede lograr esto con varios tramos con la misma clase?
Matthew Woodard

Me topé con esto tratando de descubrir tspan para trabajar con IE. He descubierto que necesita usar .text () con tspan y no .html (). No estoy seguro de por qué y puede que no sea el caso para todos, pero lo arregló en IE cuando usé .text ().
Kalel Wade

@MatthewWoodard $('.class').each(function() { $(this).html() });; porque $('.class').html()devolverá el valor .html () para el primer elemento
tomsihap


7

Suponiendo que tenía la intención de leer id = "item1", necesita

$('#item1 span').text()


5

Como no proporcionó un atributo para el valor del 'elemento', supongo que se está utilizando una clase:

<div class='item1'>
  <span>This is my name</span>
</div>

alert($(".item span").text());

Asegúrese de esperar a que se cargue el DOM para usar su código, en jQuery usa la ready()función para eso:

<html>
 <head>
  <title>jQuery test</title>
  <!-- script that inserts jquery goes here -->
  <script type='text/javascript'>
    $(document).ready(function() { alert($(".item span").text()); });
  </script>
</head>
<body>
 <div class='item1'>
   <span>This is my name</span>
 </div>
</body>


1
has cambiado la pregunta! Su respuesta es correcta para su pregunta, él se especifica el ID no es un nombre de clase
Lewis

bueno, si ves el primer comentario debajo de su nombre, notarás que no escribió ningún atributo, era <div 'item1'>, supuse que aparentemente estaba equivocado.
Francisco Aquino

2

¿En javascript no usarías document.getElementById('item1').innertext?





0

MUY IMPORTANTE Información adicional sobre la diferencia entre .text () y .html ():

Si su selector selecciona más de un elemento, por ejemplo, tiene dos tramos así <span class="foo">bar1</span> <span class="foo">bar2</span> ,

luego

$('.foo').text();agrega los dos textos y te doy eso; mientras

$('.foo').html(); te da solo uno de esos.


0

Puede usar id in span directamente en su html.

<span id="span_id">Client</span>

Entonces su código jQuery sería

$("#span_id").text();

Alguien me ayudó a verificar errores y descubrió que usaba val () en lugar de text (), no es posible usar la función val () en span. Entonces

$("#span_id").val();

volverá nulo.


-2
<script>
    $(document).ready(function () {

            $.each($(".classBalence").find("span"), function () {
            if ($(this).text() >1) {
                $(this).css("color", "green")

            }
            if ($(this).text() < 1) {
                $(this).css("color", "red")
                $(this).css("font-weight", "bold")
            }
        });

    });
    </script>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.