I am trying to get and array of text after using the text function, having a ul list like
<ul>
<li>one
<ul>
<li>one one</li>
<li>one two</li>
</ul>
</li>
</ul>
then get something like
['one', 'one one', 'one two']
-
2Please post the jQuery you've tried.j08691– j086912013-05-15 16:41:21 +00:00Commented May 15, 2013 at 16:41
-
I was working with jstree, cause of that I dont paster my code cause it is too long, however, all ideas from here helpe a lot on how to solve my issue. Thanks to allCarlos– Carlos2013-05-15 16:56:35 +00:00Commented May 15, 2013 at 16:56
Add a comment
|
7 Answers
var array = $('li').map(function(){
return $.trim($(this).text());
}).get();
Demo Fiddle --> http://jsfiddle.net/EC4yq/
3 Comments
TrueWill
You may want to chain a call to
.toArray().
mangatinanda
what does
get() method do? BTW We can do $('li').toArray().map((li) => { return li.innerText.trim(); })
Winand
Try this:
$("li").map(function(){ return this.innerText })
or this:
$("li").toArray().map(function(i){ return i.innerText })
Comments
You just want to get the text from all the li's?
var resultArray = [];
$('li').each(function(){
resultArray.push($(this).text());
});
Comments
Several of the answers ignore the OP's desired format.
This will give you what you want.
$('li').map(function(){
var $clone = $(this).clone();
$clone.children('*').remove();
return $.trim($clone.text());
}).get()
Fiddle: http://jsfiddle.net/pE9PR/
Comments
You could do something like
var children = $(listholder).children();
var array = [];
var i = 0;
$.each(children, function(key, value){
array.push($(this).text());
});
Comments
The accepted answer actually not answer the question, OP want firstChild text
['one', 'one one', 'one two']
but accepted answer give textContent
['one\n\none one\none two', 'one one', 'one two']
There are two method to answer, first using jQuery contents()
var array = $('li').map(function() {
return $(this).contents()[0].textContent.trim()
}).get();
console.log(array)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>one
<ul>
<li>one one</li>
<li>one two</li>
</ul>
</li>
</ul>second, using plain js firstChild
var array = Array.from(document.querySelectorAll('li'))
.map(i => i.firstChild.textContent.trim())
console.log(array)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>one
<ul>
<li>one one</li>
<li>one two</li>
</ul>
</li>
</ul>
Comments
This gets the job done regardless of the tag names. Select your parent.
It gives an array of strings with no duplications for parents and their children.
$('parent')
.find(":not(iframe)")
.addBack()
.contents()
.filter(function() {return this.nodeType == 3;})
.map((i,v) => $(v).text())
