javascript - jQuery 根据数字对 DOM 进行排序

Question

以下是重复的类:

<div class="inner">
          <p> 
                    Text1 
                    <span class="plus"> 25</span>
                    <span class="minus">12</span>
          </p>
</div>



<div class="inner">
              <p> 
                        Text2 
                        <span class="plus"> 205</span>
                        <span class="minus">2</span>
              </p>
    </div>

我有两个 href 标签作为排序按钮:

<a href="#" id="pos">Sort by Positive.</a>
<a href="#" id="neg">Sort by Negative.</a>

通过 jQuery，我如何使用 <p> 重新渲染 dom根据按钮点击排序？

fiddle 位于 here .

Answer 1

类似于:

$("#pos").click(function(e){
  e.preventDefault();

  $('.inner').sort(function (a, b) {
    return parseInt($('.plus', a).text(), 10) - parseInt($('.plus', b).text(), 10);
  })
  .appendTo('div.main');
});

$("#neg").click(function(e){
  e.preventDefault();

  $('.inner').sort(function (a, b) {
    return parseInt($('.minus', a).text(), 10) - parseInt($('.minus', b).text(), 10);
  })
  .appendTo('div.main');
});

http://jsfiddle.net/pHyDm/8/

尽管这两个函数基本相同，并且可以/应该进行一些重构。