get value of span

Navigation
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>

How do I get the words that span contains?

    
asked by hubman 14.02.2017 в 05:24
source

3 answers

1

Define a matrix, in the following example it is data , and then use the push method to add the values to it.

Example: 

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>
    
answered by 14.02.2017 / 06:55
source
2

Dear, Try this 

$('#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>

Greetings,

    
answered by 14.02.2017 в 05:31
1

In your code I see a couple of errors:

  • The HTML code is wrong, the syntax for a HTML list should be: 

    • <ul>
   <li>Primer elemento</li>
   <li>Segundo elemento</li>
   <li>Tercer elemento</li>
</ul>
  • An element such as a span does not contain a value (that's for inputs text ), it contains innerHTML , which in this case would be the text of each item in the list.

    • By editing the javascript code a bit, you can fix it: 

    $('#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: My recommendation is that you correct the HTML code, so that jQuery has to travel less DOM when it comes to processing all the elements, apart from that a bad HTML code can cause defects in different browsers: 

    $('#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>
        
    answered by 14.02.2017 в 08:49
    Send data by url with jquery How to use ajax with django forms?