使用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对列表中的内容进行排序

回答

相关问题