CODEWITHSUNDEEP
javascriptjqueryhtml
hasan.iqbal.anik
hasan.iqbal.anik

Reputation: 21

How to select li elements of an ul in jquery?

I have an unordered list:

<li class="t-header" id = "BackLogList">
        <ul>
            <li class="t-header-description">Description</li>
            <li class="t-header-project-name">Project Name</li>
            <li class="t-header-Type">Type</li>
            <li class="t-header-priority">Priority</li>
            <li class="t-header-status">Status</li>
        </ul>
    </li>

I need to select the html texts of all the li elements and sort them using jquery.

How can I do that?

Thanks

Upvotes: 0

Views: 718

Answers (8)

Jan Pfeifer
Jan Pfeifer

Reputation: 2861

You can try this simple code:

$('#BackLogList li').sort(function(a,b){return a.innerHTML > b.innerHTML ? 1 : -1;}).appendTo('#BackLogList ul');

Upvotes: 1

campino2k
campino2k

Reputation: 1661

Get the texts as array to get them sortable as you wish.

lis = $('#BackLogList li');
text = $.map(lis, function(value, index) {
    return $(value).text();
});
//"text" is now an array of texts

Upvotes: 0

gion_13
gion_13

Reputation: 41533

var ul = $('#BackLogList');
var lis = ul.children('li').get();
lis.sort(function(a,b){
    var v1 = $(a).text(),v2 = $(b).text();
    if(v1 === v2)
        return 0;
    return v1 < v2 ? 1 : -1;
});
ul.html(lis);

Upvotes: 0

Marcus
Marcus

Reputation: 5143

For example:

var items = $("ul li").map(function(){return $(this).text();}).get().sort();

Upvotes: 0

jackJoe
jackJoe

Reputation: 11148

pick the html of each and place them into an array:

var liArray = [];

$(".t-header li").each(function(){
    liArray.push($(this).html());
});

//sort them (alphabetically):
liArray.sort();

fiddle here: http://jsfiddle.net/v5XB9/

Upvotes: 0

DarkDevine
DarkDevine

Reputation: 1047

Are you looking for something like this?

$( '.t-header li' ).each( function() {
    //Search algorithm where $( this ) is the current li that is handled
} );

Upvotes: 0

Sedat Başar
Sedat Başar

Reputation: 3798

u can get li array like this

$('ul').children('li')

and u can get their text's like this

$('ul').children('li').each(function(){
    alert($(this).text())
})

and about sorting how u want the sort them?

Upvotes: 0

Thijs
Thijs

Reputation: 3055

If thats your whole list I would change the markup to:

<ul id="BacklogList"> 
  <li class="t-header-description">Description</li> 
  <li class="t-header-project-name">Project Name</li> 
  <li class="t-header-Type">Type</li> 
  <li class="t-header-priority">Priority</li> 
  <li class="t-header-status">Status</li> 
</ul>

Upvotes: 0

Related Questions