How to find each li from Div and how to get text of each <li> tag?

Question

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

Answer 1

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

Answer 2

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());
});

Answer 3

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

With this you get text from all li elements.

fiddle

Answer 4

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

Answer 5

try this:

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

liText will contain all the "li"s texts.

Answer 6

This can be achieved by

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

Answer 7

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