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




dom sorting (9)

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

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

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


Answers

لقد استخدمت TinySort لفترة من الوقت ، وهو خفيف وسريع. يتم استخدامه ليكون jQuery plug-in ولكنه الآن JS محض.

http://tinysort.sjeiti.com/


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

انتهى بي الأمر توسيع 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)));
    }
}

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 مع المحتوى الذي تم فرزه


إذا كنت تستخدم jQuery ، فيمكنك القيام بذلك:

$(function() {

  var $list = $("#list");

  $list.children().detach().sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
  }).appendTo($list);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

لاحظ أن إرجاع 1 و -1 (أو 0 و 1) من الدالة مقارنة غير صحيح على الإطلاق .


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

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


@ يعمل حل 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


لجعل هذا العمل يعمل مع جميع المتصفحات بما في ذلك 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");

$(".list li").sort(asc_sort).appendTo('.list');
//$("#debug").text("Output:");
// accending sort
function asc_sort(a, b){
    return ($(b).text()) < ($(a).text()) ? 1 : -1;    
}

// decending sort
function dec_sort(a, b){
    return ($(b).text()) > ($(a).text()) ? 1 : -1;    
}

العرض التوضيحي المباشر: http://jsbin.com/eculis/876/edit


تم تقديم String.prototype.includes() في ES6.

يحدد ما إذا كان يمكن العثور على سلسلة واحدة داخل سلسلة أخرى ، وإرجاع صواب أو خطأ كما هو مناسب.

بناء الجملة

var contained = str.includes(searchString [, position]);  

المعلمات

searchString

سلسلة يتم البحث عنها ضمن هذه السلسلة.

position

الموضع في هذه السلسلة التي تبدأ searchString البحث عن searchString الافتراضي إلى 0.

مثال

var str = "To be, or not to be, that is the question.";

console.log(str.includes("To be"));    // true
console.log(str.includes("question")); // true
console.log(str.includes("To be", 1)); // false  

ملحوظة

هذا قد يتطلب ES6 الرقائق في المتصفحات القديمة.





javascript jquery dom sorting