¿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>
Felipe Barreiros
fuente

Respuestas:

299

Creo que este debería ser un ejemplo simple:

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

o

$('#item1 span').html();
Luis
fuente
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
13
$("#item1 span").text();
rahul
fuente
7

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

$('#item1 span').text()
Rico
fuente
5

$('#item1').text(); or $('#item1').html(); funciona bien para id="item1"

dipraj.shahane
fuente
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>

Francisco Aquino
fuente
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?

Gruñón
fuente
1
     $('span id').text(); worked with me
Dev.H
fuente
1

$('#id span').text() ¡es la respuesta!

Nacho
fuente
0

$('#item1 span').html(); Funciona con mi código

Mohammed Javed
fuente
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.

usuario3788051
fuente
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.

Cristian
fuente
-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>
Mahesh
fuente