8

動的に作成される以下のリストがあります。

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

jQueryを使用してこのリストを注文することは可能ですか？次のように、下から大きい順に並べる必要があります。

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

4

6 に答える 6

9

以下はトリックを行う必要があります：

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

于 2012-04-18T18:15:38.067 に答える
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);
于 2012-04-18T18:24:47.530 に答える
2

これを処理するjQueryプラグインもあります。TinySortをチェックしてください

于 2012-04-18T18:16:53.463 に答える
2

これを行うための可能な方法は次のとおりです。

$(function() {
  var elems = $('ul').children('li').remove();
  elems.sort(function(a, b) {
    return parseInt($(a).text()) > parseInt($(b).text());
  });
  $('ul').append(elems);
});
<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>

于 2012-04-18T18:18:58.400 に答える
1

できるよ：

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

于 2012-04-18T18:32:14.750 に答える
0

sortContentプラグインを使用すると、すべてが簡単でクリーンになり、再利用できるようになります。

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

知っている：

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

デモ

他のオプションを見つけたい場合は、プラグインのホームページにアクセスしてください

于 2014-07-06T07:43:06.973 に答える