CODEWITHSUNDEEP
jquerysorting
Aleksandra Chuprova
Aleksandra Chuprova

Reputation: 503

sort the contents of the list with jquery

I need to sort alphabetically the list items. A list item contains html which cannot be changed. So I need only to sort the "visible" part.

This is the script I have: 

 $('.box').each(function(){
var labels = []
var sortedlis = [];

var lis = $(this).find('li');

$(this).find('li').each(function(){
     labels.push( $(this).find('label').text() );
 });


labels.sort();

console.log(labels);

for (i=0; i< lis.length; i++){
    console.log('start loop 1');

    for (ind = 0; ind< labels.length; ind++){
        console.log('start loop 2');

        if (lis[i].textContent == labels[ind]){
                  sortedlis[ind] = lis[i];
                 // console.log(ind + ' sorted lis ind');
                 console.log(i +' true ' + lis[i].textContent + ' ind= '+ind);

         }else{
             console.log(i + ' false');
         }
    }
}

console.log(sortedlis);

for(index = 0; index < sortedlis.length; index++){

    //lis[index].css('background', 'red');
    lis[index].innerHTML = sortedlis[index].innerHTML;

}


});

I have made a jsFiddle. I cannot sort out why the script doesn't work... Could anyone point me to the mistake in code?

Upvotes: 1

Views: 1433

Answers (2)

GGO
GGO

Reputation: 2748

In your last for loop, you are updating <li> with the innerHtml property. But js variable sortedlis uses reference and when the last property is set, you already have set it before.

That's why you duplicate your Breedstraler label.

Your algorithm is not bad but it's too complicate to understand. You have to improve, Milan answer is a better way ;)

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

You can use a simple sort to achieve the alphabetical sort of your list: 

$(document).ready(function() {
  var mylist = $('#myUL');
  var listitems = mylist.children('li').get();
  listitems.sort(function(a, b) {
    return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
  })
  $.each(listitems, function(idx, itm) {
    mylist.append(itm);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-content box">
  <ul id="myUL">
    <li><label class="sf-checked"><input data-keyword="lampmodel-bouwlamp" type="checkbox" name="attribute[357]" value="Bouwlamp" checked="checked">Bouwlamp </label></li>
    <li><label><input data-keyword="lampmodel-bouwlamp-werklamp" type="checkbox" name="attribute[357]" value="Werklamp">Werklamp</label></li>
    <li><label><input data-keyword="lampmodel-breedstraler-bouwlamp-werklamp" type="checkbox" name="attribute[357]" value="Breedstraler">Breedstraler</label></li>
    <li><label><input data-keyword="lampmodel-looplamp-werklamp" type="checkbox" name="attribute[357]" value="Looplamp">Looplamp</label></li>
    <li><label><input data-keyword="lampmodel-tl-lamp" type="checkbox" name="attribute[357]" value="TL-lamp">TL-lamp </label></li>
  </ul>
</div>

Upvotes: 4

Related Questions