Wie die Reihenfolge (Sortierung) a <li> Liste mit numerischen Inhalten?

Habe ich eine Liste wie unten, die dynamisch erstellt wird:

HTML:

<ul>
  <li>20</li>
  <li>10</li>
  <li>5</li>
  <li>3</li>
  <li>32</li>
  <li>25</li>
  <li>6</li>
  <li>12</li>
  <li>8</li>
</ul>

Ist es möglich, um diese Liste mit jQuery? Ich brauche es bestellt von den geringeren zu den größeren, wie diese:

HTML:

<ul>
  <li>3</li>
  <li>5</li>
  <li>6</li>
  <li>8</li>
  <li>10</li>
  <li>12</li>
  <li>20</li>
  <li>25</li>
  <li>32</li>
</ul>

InformationsquelleAutor Marcio Mazzucato | 2012-04-18
  1. 9

    Unten sollte den trick tun:

    JS:

    $(function() {
  $('button').click(function() {
    var liContents = [];
    $('ul li').each(function() {
      liContents.push(parseInt($(this).text(), 10));
    });
    liContents.sort(numOrdDesc);
    $('ul li').each(function() {
      $(this).text(liContents.pop());
    });
  });
});

function numOrdDesc(a, b) {
  return (b - a);
}

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>20</li>
  <li>10</li>
  <li>5</li>
  <li>3</li>
  <li>32</li>
  <li>25</li>
  <li>6</li>
  <li>12</li>
  <li>8</li>
</ul>

<button>Sort</button>

    InformationsquelleAutor Selvakumar Arumugam
  2. 9
    var li = $('ul li');
li.sort(function(a, b) {
    if(parseInt($(a).text()) > parseInt($(b).text()))
        return 1;
    else return -1;
});
$('ul').empty().html(li);
    InformationsquelleAutor thecodeparadox
  3. 2

    Es gibt jQuery-plugins, um diese zu bewältigen sowie. Check-out TinySort

    InformationsquelleAutor bvulaj
  4. 1

    Hier ist ein möglicher Weg, es zu tun:

    JS:

    $(function() {
  var elems = $('ul').children('li').remove();
  elems.sort(function(a, b) {
    return parseInt($(a).text()) > parseInt($(b).text());
  });
  $('ul').append(elems);
});

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>20</li>
  <li>10</li>
  <li>5</li>
  <li>3</li>
  <li>32</li>
  <li>25</li>
  <li>6</li>
  <li>12</li>
  <li>8</li>
</ul>

    InformationsquelleAutor The Alpha
  5. 1

    Können Sie tun:

    JS:

    var listItems = [];
$("#list li").each(function() {
  console.log($(this).text());
  listItems.push(parseInt($(this).text()));
});

listItems.sort(function(a, b) {
  return a - b
});

$("#list").html("");
$.each(listItems, function(i, v) {
  $("#list").append($("<li>" + v + "</li>"));
});

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list">
  <li>20</li>
  <li>10</li>
  <li>5</li>
  <li>3</li>
  <li>32</li>
  <li>25</li>
  <li>6</li>
  <li>12</li>
  <li>8</li>
</ul>

    InformationsquelleAutor michaelward82
  6. 0

    Mit sortContent plugin ,alles wird einfach sein,sauber und bereit für die Wiederverwendung : 

     $('ul').sortContent({helper:myhelper});

    Bekannt, dass : 

    myhelper=function(e){
   return $('a',$(e)).attr('href');
}

    DEMO

    Wenn Sie möchten, andere Optionen entdecken , besuchen Sie Plugin HOMEPAGE

    • Sie soll deutlich machen, dass Sie der Autor des plugins, die Sie vorgeschlagen sind.
    InformationsquelleAutor Abdennour TOUMI
Schreibe einen Kommentar