0

$('#usuarios').children('ul').each(function () {
   console.log(this);
});
#usuarios ul{
display:inline-block;
}
ul{
width:100px;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="usuarios">
  <ul><span>ayer</span> </ul>
  <ul><span>amor</span></ul>
  <ul><span>gab</span> </ul>
  <ul><span>rio</span> </ul>
  <ul><span>bestia</span> </ul>
  <ul><span>gorro</span> </ul>
  <ul><span>abrigo</span> </ul>
  <ul><span>jaula</span> </ul>
  <ul><span>zorra</span> </ul>
  <ul><span>tele</span> </ul>
</div>

como obtengo las palabras que contiene span?

2
  • 1
    Esto no es lo que te sugería que hicieses en la otra pregunta. La idea sería que fuese algo como esto otro: <ul id="usuarios"><li><div>Usuario 1</div></li><li><div>Usuario 2</div></li>....</ul>. El código que compartes no es HTML válido.
    – Alvaro Montoro
    el 14 feb. 2017 a las 5:20
  • 1
    Y relacionado con esta pregunta directamente: tienes que concretarla un poco. ¿Qué palabras quieres obtener?¿Las de todos los span o sólo las de alguno en concreto?
    – Alvaro Montoro
    el 14 feb. 2017 a las 5:22

3 respuestas 3

2

Estimado, Prueba esto

$('#usuarios').children('ul').each(function () {
   console.log(jQuery(this).text())
   // ó console.log(jQuery(this).html())
});
#usuarios ul{
display:inline-block;
}
ul{
width:100px;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="usuarios">
  <ul><span>ayer</span> </ul>
  <ul><span>amor</span></ul>
  <ul><span>gab</span> </ul>
  <ul><span>rio</span> </ul>
  <ul><span>bestia</span> </ul>
  <ul><span>gorro</span> </ul>
  <ul><span>abrigo</span> </ul>
  <ul><span>jaula</span> </ul>
  <ul><span>zorra</span> </ul>
  <ul><span>tele</span> </ul>
</div>

Saludos,

1

Define una matriz, en el ejemplo siguiente es data, y luego usa el método push para agregar los valores a esta.

Ejemplo:

var data = [];
$('#usuarios').children('ul').each(function () {
   data.push($(this).children('span').text());
});
console.log(data);
#usuarios ul{
display:inline-block;
}
ul{
width:100px;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="usuarios">
  <ul><span>ayer</span> </ul>
  <ul><span>amor</span></ul>
  <ul><span>gab</span> </ul>
  <ul><span>rio</span> </ul>
  <ul><span>bestia</span> </ul>
  <ul><span>gorro</span> </ul>
  <ul><span>abrigo</span> </ul>
  <ul><span>jaula</span> </ul>
  <ul><span>zorra</span> </ul>
  <ul><span>tele</span> </ul>
</div>

1

En tu codigo veo un par de errores:

  1. El codigo HTML esta mal, la sintaxis para una lista HTML debería ser:

<ul>
   <li>Primer elemento</li>
   <li>Segundo elemento</li>
   <li>Tercer elemento</li>
</ul>

  1. Un elemento como un span no contiene un value (eso es para inputs tipo text), contiene innerHTML, que en este caso seria el texto de cada elemento de la lista.

Editando un poco el codigo javascript puedes solucionarlo:

$('#usuarios > ul').children('span').each(function () { 
  // Cambiamos el selector de jQuery para que busque directamente los ul de #usuarios
  // y procese cada span
   console.log(this.innerHTML); // Utilizamos innerHTML para acceder al texto del span
});
#usuarios ul{
  display:inline-block;
  width:100px;
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="usuarios">
  <ul><span>ayer</span> </ul>
  <ul><span>amor</span></ul>
  <ul><span>gab</span> </ul>
  <ul><span>rio</span> </ul>
  <ul><span>bestia</span> </ul>
  <ul><span>gorro</span> </ul>
  <ul><span>abrigo</span> </ul>
  <ul><span>jaula</span> </ul>
  <ul><span>zorra</span> </ul>
  <ul><span>tele</span> </ul>
</div>

PD: Mi recomendación es que corrijas el código HTML, para que jQuery tenga que recorrer menos DOM a la hora de procesar todos los elementos, aparte de que un mal codigo HTML puede causar defectos en segun que navegadores:

$('#usuarios').children('li').each(function () {
   console.log(this.innerHTML); // innerHTML accede al texto del elemento y NO al elemento
});
#usuarios li{
  display:inline-block;
  width:100px;
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="usuarios">
  <li>ayer</li>
  <li>amor</li>
  <li>gab</li>
  <li>rio</li>
  <li>bestia</li>
  <li>gorro</li>
  <li>abrigo</li>
  <li>jaula</li>
  <li>zorra</li>
  <li>tele</li>
</ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.