jqueryでリストの内容をソート

Question

リスト項目をアルファベット順にソートする必要があります。リスト項目には変更できないhtmlが含まれています。ですから、私は "目に見える"部分をソートするだけです。私はjsFiddleをした

$('.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; 

} 


}); 

：

これは私が持っているスクリプトです。私はスクリプトがうまくいかない理由を整理することはできません...誰かが私のコードで間違いを指摘できますか？

Answer 1

あなたはあなたのリストをアルファベット順に並べ替えを達成するために、単純なsortを使用することができます：あなたの最後のforループでは

$(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>

Answer 2

は、あなたがinnerHTMLプロパティと<li>を更新しています。しかし、js変数sortedlisは参照を使用しており、最後のプロパティが設定されているときは、前もって設定しています。

だからこそ、Breedstralerというラベルを複製しています。

あなたのアルゴリズムは悪くないが、理解するには複雑すぎる。あなたは改善する必要があります、ミラノの答えは良い方法です;）