I have some HTML like:
<ul id='foo'>
<span><a>hello 1</a></span>
<span><a>hello 2</a></span>
<span><a>hello 3</a></span>
</ul>
I want to get an array of all the text values of the elements like:
var texts = [ 'hello 1', 'hello 2', 'hello 3' ];
I'm trying to iterate over each one, is there some way in jQuery to just grab all of them using a selector?
You can do it using .map() like this:
var myArray = $("#foo span a").map(function() {
return $(this).text();
}).get();
.get() returns a basic array, but what is it doing and why does it do that? Can't seem to find an explanation in the jQuery refs (just a mention that that's what it does).
.toArray() to get a clean array back, without the extra jQuery properties.Or a little bit shorter than the accepted answer:
$.map($("#foo span a"), $.text)
Try this:
$('#foo span a').map(function() { return $(this).text(); }).get();
.get() at the end would give you a basic array) ).
you can do it like this
var texts = new Array();
$('#foo > span > a').each(function()
{
texts.push( $( this ).text() );
});
Additionally, the function to get the array of values with trimmed spaces:
var array = $('li').map(function(){
return $.trim($(this).text());
}).get();
Try this:
var texts = new Array();
//or... var texts = [];
$('#foo a').each(function() {
texts.push($(this).text());
})
array() is PHP. To create an empty array in JavaScript, the array literal [] is preferred.use the jquery selector:
$("ul#foo span a")
a tags, not the contents of all the a tags.