[Javascript] كيف يمكنني فرز قائمة أبجديًا باستخدام jQuery؟


Answers

شيء من هذا القبيل:

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); });

من هذه الصفحة: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

فوق رمز سوف فرز قائمة unordered مع معرف 'myUL'.

أو يمكنك استخدام البرنامج المساعد مثل TinySort. https://github.com/Sjeiti/TinySort

Question

أنا من عمق بلدي قليلا هنا وأنا آمل أن هذا ممكن في الواقع.

أود أن أكون قادرًا على استدعاء وظيفة تقوم بفرز كافة العناصر في قائمتي أبجديًا.

لقد كنت أبحث في واجهة المستخدم jQuery لفرز ولكن لا يبدو أن ذلك. أي أفكار؟




كنت أتطلع إلى القيام بذلك بنفسي ، ولم أكن راضيا عن أي من الإجابات المقدمة ببساطة ، لأنني أعتقد أنها أوقات تربيعية ، ولست بحاجة إلى القيام بذلك على قوائم المئات من العناصر الطويلة.

انتهى بي الأمر توسيع jquery ، ويستخدم حل بلدي مسج ، ولكن يمكن تعديلها بسهولة لاستخدام جافا سكريبت على التوالي.

أنا فقط الوصول إلى كل عنصر مرتين ، وأداء نوع واحد خطي ، وهذا ما ينبغي ، كما أعتقد ، العمل على أن تكون أسرع بكثير على مجموعات البيانات الكبيرة ، على الرغم من أنني أعترف بحرية يمكن أن أكون مخطئا هناك:

sortList: function() {
   if (!this.is("ul") || !this.length)
      return
   else {
      var getData = function(ul) {
         var lis     = ul.find('li'),
             liData  = {
               liTexts : []
            }; 

         for(var i = 0; i<lis.length; i++){
             var key              = $(lis[i]).text().trim().toLowerCase().replace(/\s/g, ""),
             attrs                = lis[i].attributes;
             liData[key]          = {},
             liData[key]['attrs'] = {},
             liData[key]['html']  = $(lis[i]).html();

             liData.liTexts.push(key);

             for (var j = 0; j < attrs.length; j++) {
                liData[key]['attrs'][attrs[j].nodeName] = attrs[j].nodeValue;
             }
          }

          return liData;
       },

       processData = function (obj){
          var sortedTexts = obj.liTexts.sort(),
              htmlStr     = '';

          for(var i = 0; i < sortedTexts.length; i++){
             var attrsStr   = '',
                 attributes = obj[sortedTexts[i]].attrs;

             for(attr in attributes){
                var str = attr + "=\'" + attributes[attr] + "\' ";
                attrsStr += str;
             }

             htmlStr += "<li "+ attrsStr + ">" + obj[sortedTexts[i]].html+"</li>";
          }

          return htmlStr;

       };

       this.html(processData(getData(this)));
    }
}



لجعل هذا العمل يعمل مع جميع المتصفحات بما في ذلك Chrome ، يلزمك إجراء وظيفة رد الاتصال من sort () return -1،0 or 1.

راجع http://inderpreetsingh.com/2010/12/01/chromes-javascript-sort-array-function-is-different-yet-proper/

function sortUL(selector) {
    $(selector).children("li").sort(function(a, b) {
        var upA = $(a).text().toUpperCase();
        var upB = $(b).text().toUpperCase();
        return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
    }).appendTo(selector);
}
sortUL("ul.mylist");



HTML

<ul id="list">
    <li>alpha</li>
    <li>gamma</li>
    <li>beta</li>
</ul>

جافا سكريبت

function sort(ul) {
    var ul = document.getElementById(ul)
    var liArr = ul.children
    var arr = new Array()
    for (var i = 0; i < liArr.length; i++) {
        arr.push(liArr[i].textContent)
    }
    arr.sort()
    arr.forEach(function(content, index) {
        liArr[index].textContent = content
    })
}

sort("list")

JSFiddle Demo https://jsfiddle.net/97oo61nw/

هنا نقوم بدفع جميع قيم عناصر li داخل ul id محدد (والتي قدمناها كوسيطة دالة) إلى array arr و sort it باستخدام sort() method الذي يتم ترتيبه أبجديًا بشكل افتراضي. بعد فرز arr الصفيف ، نقوم forEach() هذه الصفيف باستخدام طريقة forEach() فقط المحتوى النصي لجميع عناصر li مع المحتوى الذي تم فرزه




@ يعمل حل SolutionYogi مثل السحر ، ولكن يبدو أن استخدام $ .each أقل وضوحًا وكفاءة من إلحاق listitems مباشرة:

var mylist = $('#list');
var listitems = mylist.children('li').get();

listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})

mylist.empty().append(listitems);

Fiddle