使用jquery對列表中的內容進行排序

我需要按字母順序排序列表項。列表項包含無法更改的html。所以我只需要對「可見」部分進行排序。使用jquery對列表中的內容進行排序

這是腳本我有：

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

} 


});

我已經做出了jsFiddle。我無法理清腳本爲什麼不起作用......任何人都可以指出我在代碼中的錯誤嗎？

來源

2017-09-25 Aleksandra Chuprova

您可以使用一個簡單的sort實現字母排序列表中：

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

來源

2017-09-25 09:52:21

在你的最後for循環，您正在使用innerHTML屬性更新<li>。但是js變量sortedlis使用了引用，當最後一個屬性被設置時，您已經設置了它。

這就是您複製Breedstraler標籤的原因。

你的算法並不壞，但它太複雜了。你必須改善，米蘭的回答是一個更好的方法;）

來源

2017-09-25 09:58:26 GGO

不尋找一個簡單的方法:-D感謝您的解釋！ –

使用jquery對列表中的內容進行排序

回答

相關問題