Question

我需要按字母顺序对列表项进行排序。列表项包含无法更改的html。所以我只需要对“可见”部分进行排序。

这是我的脚本：

 $('.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。我无法理清脚本无法正常工作的原因......有人能指出代码中的错误吗？

Answer 1

您可以使用简单的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>

Answer 2

在您的上一个for循环中，您正在使用innerHtml属性更新<li>。但是js变量sortedlis使用引用，当设置了最后一个属性时，你已经在之前设置了它。

这就是您复制Breedstraler标签的原因。

你的算法并不错，但理解起来太复杂了。你必须改进，米兰回答是更好的方式;）

使用jquery

2 个答案: