আমি কীভাবে jQuery ব্যবহার করে বর্ণানুক্রমিকভাবে একটি তালিকা বাছাই করতে পারি?

Question

আমি এখানে আমার গভীরতা থেকে কিছুটা দূরে আছি এবং আমি আশা করছি এটি আসলে সম্ভব।

আমি এমন একটি ফাংশন কল করতে সক্ষম হতে চাই যা আমার তালিকার সমস্ত আইটেম বর্ণমালা অনুসারে বাছাই করবে।

আমি বাছাইয়ের জন্য jQuery ইউআইয়ের মাধ্যমে খুঁজছি কিন্তু এটি এটি বলে মনে হয় না। কোন চিন্তা?

Comments

stackoverflow.com/questions/304396/…

— রকেট হাজমাত

পরীক্ষা করে দেখুন Underscore.js বা Sugar.js ।

— ক্রিস খাইরা

Answer 1

আপনাকে যা না jQuery এর এই কাজ করতে প্রয়োজন ...

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Idiot-proof, remove if you want
  if(!ul) {
    alert("The UL object is null!");
    return;
  }

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

ব্যবহার করা সহজ...

sortUnorderedList("ID_OF_LIST");

লাইভ ডেমো →

Comments

একটি সমস্যা যা আমি এই পদ্ধতির সাথে পেয়েছি তা হ'ল যেহেতু এটি কেবল পাঠ্য যা চারপাশে সরিয়ে নেওয়া হচ্ছে, যদি আপনি বাছাইয়ের আগে jQuery.data ব্যবহার করে DOM নোডের সাথে ডেটা যুক্ত করেন, সেই সমিতিগুলি এখন সাজানোর পরে ভুল নোডগুলির দিকে ইঙ্গিত করছে।

— অদ্ভুততা

অভ্যন্তরীণ এইচটিএমএল সহ উপাদানগুলি সরানো একটি খারাপ সমাধান কারণ তারা বাছাইয়ের পরে একই উপাদান নয়। উপাদানগুলির সমস্ত বিদ্যমান উল্লেখ হারিয়ে গেছে। জাভাস্ক্রিপ্ট থেকে আবদ্ধ সমস্ত ইভেন্ট শ্রোতা হারিয়ে গেছে। ইন্টিরিএনএইচটিএমএলের পরিবর্তে উপাদানগুলি সংরক্ষণ করা ভাল, উপাদানগুলিকে সরিয়ে নিতে একটি বাছাই ফাংশন (vals.sort (ফাংশন (ক, খ) {রিটার্ন b.innerHTML <a.innerHTML;})) এবং অ্যাপেন্ডচিল্ড ব্যবহার করা ভাল।

— গ্রেজার

বুহুউইউনএইচটিএমএল! এটি ব্যবহার করবেন না। এটি মাইক্রোসফ্ট মালিকানাধীন জিনিস এবং ডাব্লু 3 সি এর দ্বারা স্বীকৃতি পায় নি।

— স্টিভ কে

আইএমএইচও এটি একটি ভয়ঙ্কর উত্তর। ডোম নোডগুলি সিরিয়াল না করে এবং সেগুলি আবার ডিজাইরিয়াস না করে এবং কোনও সংযুক্ত বৈশিষ্ট্য এবং / বা ইভেন্টগুলি বিনা বিনা পুনরায় সাজানো সম্ভব।

— Alnitak

... তবে আপনি যদি jQuery ব্যবহার করেন তবে আপনি এটি কীভাবে করবেন?

— ম্যাথু

Answer 2

এটার মতো কিছু:

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-eferences-with-jquery/

উপরের কোডটি আপনার 'অর্পণযোগ্য' তালিকাটি আইডি 'ময়ুল' দিয়ে বাছাই করবে।

অথবা আপনি টিনিসোর্টের মতো প্লাগইন ব্যবহার করতে পারেন। https://github.com/Sjeiti/TinySort

Comments

শেষ লাইনটি $ (listitems) দিয়ে প্রতিস্থাপন করা যেতে পারে। AppendTo (মাইলিস্ট); ?

— আমির

এইচএল মেনকেনের একটি উক্তি রয়েছে যা এই সমাধানটির বর্ণনা দেয়: "প্রতিটি সমস্যার জন্য একটি সমাধান রয়েছে যা সহজ, মার্জিত এবং ভুল।" এই প্রক্রিয়াটি ও (এন ^ 2) সময়ে চলে। তুলনামূলকভাবে সংক্ষিপ্ত তালিকার সাথে এটি লক্ষণীয় নয়, তবে 100 টিরও বেশি উপাদান থাকা তালিকায় এটি বাছাই শেষ করতে 3-4 সেকেন্ড সময় নেয়।

— নাথান শক্তিশালী

@ নাথান: সম্পর্কে "প্রতিটি সমস্যার জন্য একটি সমাধান রয়েছে যা সহজ, মার্জিত এবং ভুল।" - ভাল, একটি ভুল সমাধান মার্জিত নয়।

— জোহান ফিলিপ স্ট্রাটাউসেন

কিছু দেখতে মার্জিত এবং আকর্ষণীয় হতে পারে তবে তবুও ব্যর্থ। কমনীয়তা সাফল্য বোঝায় না।

— জেন পান্ডা

এই সমাধানটি ভুল নয়। এটা প্রশ্নের উত্তর। ওপি নির্দিষ্ট করে দেয় নি যে তাকে 100 টিরও বেশি আইটেমের তালিকা বাছাই করতে হবে। যদি তার তালিকাটি 100 আইটেমের বেশি না হয় তবে এই সমাধানটি পুরোপুরি গ্রহণযোগ্য। সমাধানটি ধীর গতিতে দেখানোর জন্য +1, প্রয়োজনীয়তাগুলি 'ভুল' হিসাবে পূরণ করে এমন সমাধান ঘোষণা করার জন্য -1

— সামুরাই সোল

Answer 3

$(".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

Comments

এটি সেরা উত্তর। ভালো আমি এমনকি এটা পছন্দ এক একক লাইন: $(".list li").sort(function(a, b){return ($(b).text()) < ($(a).text());}).appendTo('.list');। যদিও একটি মন্তব্য: .text()হওয়া উচিত.text().toUpperCase()

— জুলস কলি

দুর্ভাগ্যক্রমে এই সমাধান আইই তে কাজ করে না যখন নীচে প্যাট্রিকহেক্সস উত্তর সমস্ত ব্রাউজারে কাজ করে।

— patg

নির্বাচক থেকে সাবধান! ".লিস্ট লি" কেবল তাত্ক্ষণিক শিশুদের জন্য নয়, সমস্ত বংশজাত এলআই ট্যাগ নির্বাচন করবে।

— ডগ ডোমেনি

পছন্দ করুন কল করা ভাল $(".list").children(), যদি সম্ভব হয় বা তাত্ক্ষণিকভাবে শিশু সম্পর্কের সাথে নির্বাচক সেট আপ করুন$(".list > li")

— ম্রনসেটওয়াইস

বিটিডব্লিউ এখানে এই উত্তরটি ব্যবহার করে তৈরি করা একটি ফিডেলের লিঙ্ক। আমি কোডটি সর্ব-ও-কার্যকারিতা হিসাবে সেট আপ করেছি: jsfiddle.net/mroncetwice/t0Wh6fL

— mroncetwice

Answer 4

ক্রোম সহ সমস্ত ব্রাউজারের সাথে এই কাজটি করতে আপনার সাজানোর () রিটার্ন -1,0 বা 1 এর কলব্যাক ফাংশন করতে হবে।

দেখুন http://inderporsesingh.com/2010/12/01/chromes-javascript-sort-array-function-is-differences-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");

Comments

বাছাই করা লি উপাদানগুলিকে যুক্ত করার আগে সমস্ত লি উপাদানগুলি ul.myList থেকে সরানো উচিত নয়?

— দাউদ

@ দাউদ, এলআই উপাদানগুলিকে স্পষ্টভাবে সরানোর দরকার নেই।

— ডগ ডোমেেনি

.LocaleCompare ব্যবহার অ-ASCII অক্ষরের জন্য উন্নতি হবে।

— ডগ ডোমেনি

@ ডগডমিনি, লি উপাদানগুলি স্পষ্টভাবে সরানোর প্রয়োজন হয় না কেন?

— ধনুকের

@ কিউসার্ম, অ্যাপেন্ডটো পদ্ধতিটি ডোম উপাদানগুলিকে অনুলিপি করার পরিবর্তে চালিত করে।

— ডগ ডোমেনি 5'15

Answer 5

আপনি যদি 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) ফিরিয়ে দেওয়া একেবারেই ভুল ।

Answer 6

@ সমাধানযোগীর উত্তর মনোযোগের মতো কাজ করে তবে মনে হয় $ .each ব্যবহার সরাসরি তালিকার তালিকা যোগ করার চেয়ে কম সোজা এবং দক্ষ:

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

বেহালা

Comments

'(' # তালিকা ')। খালি () -> mylist.empty () ভাল হবে। আবার ডিওএম টাচ করার দরকার নেই।

— জ্যাকব ভ্যান লিনজেন

অবশ্যই, আমি ঠিক এটি স্থির!

— বুজুত

এটি ইন্টারনেট এক্সপ্লোরারে কাজ করে না (সংস্করণ 10 দিয়ে পরীক্ষিত)।

— চাদ জনসন

আমি কেবল আইই ১১ এর সাথে পরীক্ষা করেছি এবং বাস্তবে এটি কাজ করে না। কিন্তু সমাধানযোগির কোড আইই 11 এর অধীনেও কাজ করে নি ... এটি কি আপনার পক্ষে কাজ করে?

— বুজুত

Answer 7

জিতেন্দ্র চৌহানের উত্তরের ভিত্তিতে উন্নতি

$('ul.menu').each(function(){
    $(this).children('li').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});

কেন আমি এটিকে উন্নতি হিসাবে বিবেচনা করছি:

1. eachএকাধিক উল চলমান সমর্থন করতে ব্যবহার করে

2. children('li')পরিবর্তে ব্যবহার করা ('ul li')গুরুত্বপূর্ণ কারণ আমরা কেবল বংশধরদের নয়, সরাসরি শিশুদের প্রক্রিয়াজাত করতে চাই

3. তীর ফাংশনটি ব্যবহার করা আরও (a,b)=>ভাল দেখায় (IE সমর্থিত নয়)

4. গতি উন্নতির innerTextপরিবর্তে ভ্যানিলা ব্যবহার করা$(a).text()

5. ভ্যানিলা ব্যবহার localeCompareসমান উপাদানের ক্ষেত্রে গতি উন্নত করে (বাস্তব জীবনের ব্যবহারে বিরল)

6. appendTo(this)অন্য নির্বাচক ব্যবহারের পরিবর্তে ব্যবহার করা নিশ্চিত করে নিবে যে নির্বাচক একাধিক উল ধরলেও এখনও কিছু ভেঙে না যায়

Answer 8

আমি নিজেই এটি করতে চেয়েছিলাম এবং আমি যে উত্তর সরবরাহ করেছি তা কেবল সন্তুষ্ট ছিলাম না, কারণ আমার বিশ্বাস, এগুলি চতুর্ভুজ সময়, এবং আমার কয়েকশ আইটেম দীর্ঘ তালিকাতে এটি করা দরকার।

আমি 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)));
    }
}

Answer 9

অ্যারেতে তালিকাটি রাখুন, জাভাস্ক্রিপ্ট ব্যবহার করুন .sort(), যা পূর্বনির্ধারিত বর্ণানুক্রমিকভাবে থাকে, তারপরে অ্যারেটিকে একটি তালিকায় ফিরিয়ে আনুন।

http://www.w3schools.com/jsref/jsref_sort.asp

Answer 10

এইচটিএমএল

<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")

জেএসফিডাল ডেমো https://jsfiddle.net/97oo61nw/

ডিফল্টরূপে বর্ণানুক্রম অনুসারে বাছাই করা বাছাই করা () পদ্ধতিটি ব্যবহার করে এটিকে অ্যারে করে সাজানোর জন্য আমরা এখানে নির্দিষ্ট (যা আমরা ফাংশন আর্গুমেন্ট হিসাবে সরবরাহ করেছি) দিয়ে liউপাদানগুলির সমস্ত মানগুলিকে ভিতরে চাপছি। অ্যারে বাছাই করার পরে আমরা প্রতিটি () পদ্ধতি ব্যবহার করে এই অ্যারেটি লুপ করব এবং কেবল সাজানো সামগ্রী সহ সমস্ত উপাদানগুলির পাঠ্য সামগ্রীকে প্রতিস্থাপন করবulidarrarrli