使用JS或jQuery对列表进行字母排序 [英] Alphabetize a list using JS or jQuery

查看:680
本文介绍了使用JS或jQuery对列表进行字母排序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用列表的内容,不是按字母顺序排列,然后将每个项目添加到数组中,按字母顺序排列,并按字母顺序插入列表。



普通语言:我需要使用JS或jQuery对列表进行字母排序。



这是我有的。我只是无法弄清楚如何将数组的内容插入到列表中。



提前谢谢大家:)



  var sectors = []; $ (li)。each(function(){sectors.push($(this).text())}); sectors.sort(); console.log(sectors);  pre> 

 < script src =https://ajax.googleapis.com/ajax/libs/jquery /1.4.0/jquery.min.js\"></script><ul> < li id =alphabet> B< / li> < li id =alphabet> C< / li> < li id =alphabet> A< / li>< / ul>  



https://jsfiddle.net/stu16396/

解决方案

不需要jQuery,可以使用Vanilla JavaScript。 ;}


  1. 取父元素(推荐id作为标识符)

  2. 将节点列表转换为数组,因为排序将很容易

  3. 按照自定义条件排序数组element.innerText是可见部分

  4. 逐个移动项目到正确的顺序结束

      //选择器到父元素(最佳方法由id)
    var parent = document .querySelector(ul),
    //将项目(parent.children)转换为数组
    itemsArray = Array.prototype.slice.call(parent.children);

    //按照自定义条件排序数组中的项目
    itemsArray.sort(function(a,b){
    //内部文本适合最佳(即使在某种程度上形成)
    if(a.innerText< b.innerText)return -1;
    if(a.innerText> b.innerText)return 1;
    return 0;
    });

    //在DOM中重新排序项目
    itemsArray.forEach(function(item){
    //一个一个地以正确的顺序移动到
    父项。 appendChild(item);
    });


比jQuery快一百倍性能比较图表 http://clubmate.fi/append-and- prepend-elements-with-pure-javascript /


I'm trying to take the contents of a list, that is not in alphabetical order, then by adding each item to an array, sort them into alphabetical order and insert them back into the list in alphabetical order.

Plain language: I need to alphabetize a list using JS or jQuery.

Here's what I have. I just can't figure out how to insert the contents of the array in back into the list.

Thank you all in advance :)

var sectors = [];
$("li").each(function() { sectors.push($(this).text()) });
sectors.sort();
console.log(sectors);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<ul>
  <li id="alphabet">B</li>
  <li id="alphabet">C</li>
  <li id="alphabet">A</li>
</ul>

https://jsfiddle.net/stu16396/

解决方案

There is no need for jQuery, you can use Vanilla JavaScript. ;)

  1. Take the parent element (recommend id as identifier)
  2. Convert node list to array, because sorting will then be easy
  3. Sort array by custom criteria "element.innerText" is the visible part
  4. Move item by item to the end in correct order

    // selector to parent element (best approach by id)
    var parent = document.querySelector("ul"),
        // take items (parent.children) into array
        itemsArray = Array.prototype.slice.call(parent.children);
    
    // sort items in array by custom criteria
    itemsArray.sort(function (a, b) {
        // inner text suits best (even when formated somehow)
        if (a.innerText < b.innerText) return -1;
        if (a.innerText > b.innerText) return 1;
        return 0;
    });
    
    // reorder items in the DOM
    itemsArray.forEach(function (item) {
        // one by one move to the end in correct order
        parent.appendChild(item);
    });
    

It is hundred times faster than jQuery, check the performance comparison charts http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/

这篇关于使用JS或jQuery对列表进行字母排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆