I am using below Html code and I want to get all the <li> tags from the <div id="divSelect"> and I want to get text from all li tags.

Please help , how to use .each() and .find() using JQuery.

Thanks

I am using below Html code and I want to get all the <li> tags from the <div id="divSelect"> and I want to get text from all li tags.

Please help , how to use .each() and .find() using JQuery.

Thanks

• javascript
• jquery
• html

7 Answers 7

Hey I have used your html and wrote a jQuery function which is using .each and .find to fetch all the li from the DIV.

we should use .find where we can use, its remened by jQuery.(its performance is good if it is user wisely)

html code:-

<div id="divSelect" class="custom dropdown">
    <ul>
<li>text 1</li>
<li>text 2</li>
<li>text 3</li> 
    </ul>
</div>

and javascript code is:-

 $("#divSelect").find("li").each(function()
    {
       var $li=$(this);                
       alert($li.text()) 
    });

thanks

To get them in array,You can use:

var alllitexts=$('#divSelect ul li').map(function(){
  return $(this).html();
}).get();

using each and getting them individually:

$("#divSelect ul li").each(function(){
  alert($(this).html());
});

$("#divSelect > ul > li").text();

With this you get text from all li elements.

fiddle

try this:

var liText='';
$('#divSelect ul li').each(function(){
    liText+=$(this).html();
});

liText will contain all the "li"s texts.

This can be achieved by

$("#divSelect ul li").each(function(index){
alert ( index + ": " + $( this ).text() );
});

$("#divSelect").find("li").each(function(){
  alert($(this).html());
  });

Use map in jquery to collect all data ,this.outerHTML in javascript to return the html element

    var data=$("#divSelect ul li").map(function(){
        return this.outerHTML;
    }).get();
alert(data);

DEMO