使用标签值使用 jQuery 对 div 进行排序

Question

我正在尝试使用 jQuery 对 div 进行排序，并且我有这个 html：

<div id="container">
    <button type="button" id="sort">sort</button>
    <div class="entry" id="lala">
        <a target="_blank" href="http://lala">lala</a>
        <span class="times">4</span>        
    </div>
    <div class="entry" id="lele">
        <a target="_blank" href="http://lele.com">lele.com</a>
        <span class="times">1</span>
    </div>
    <div class="entry" id="lolo">
        <a target="_blank" href="http://lolo">lolo.com</a>
        <span class="times">2</span>
    </div>
</div>

我想使用类“times”值对“entry”div 进行排序。我的 javascript 函数不起作用，因为a.child is undefined:

$( document ).ready(function() {
    $( "#add" ).click(function() {
        var elems = $('#container').children('.entry').remove();
        elems.sort(function(a,b){
            var valueA = parseInt(a.children(".times").text());
            var valueB = parseInt(b.children(".times").text());
            return (valueA < valueB) ? -1 : (valueA > valueB) ? 1 : 0;
        });
        $('#container').append(elems);
    });
});

谢谢 ;)

Answer 1

我终于使用了不同的方法。我在.entry div 中创建了属性data-sort，并使用了这个javascript 函数：

$( document ).ready(function() {
    $( "#add" ).click(function() {
        var elems = $('#container').children('.entry').remove();
        elems.sort(function(a,b){
            var a = parseInt($(a).attr("data-sort"));
            var b = parseInt($(b).attr("data-sort"));
            return (a > b) ? -1 : (a < b) ? 1 : 0;
        });
        $('#container').append(elems);
    });
}); 

我仍然不知道如何使用标签值对 div 进行排序，但这种方法确实有效。

Answer 2

我敢打赌应该有比这更简单的方法。我刚起床

$('#sort').click(function(){
    var arr = {};
$.each($('.entry'), function(ii, n){
    //console.log(n);
    arr[$(this).find('.times').html()] = n;
});
  $(arr).sort();
    $('.entry').remove();
    $.each (arr, function(i, v){
        $(v).appendTo('#container');
    })
})

jsfiddle.net example

Answer 3

有一个小插件available here 可以让你轻松做到这一点：

$('#sort').click(function() {
  $('.entry').sortElements(function(a, b) {
    return $(a).find('.times').text() > $(b).find('.times').text() ? 1 : -1;
  });
});

#这里是一个使用插件的例子#

/**
 * jQuery.fn.sortElements
 * --------------
 * @param Function comparator:
 *   Exactly the same behaviour as [1,2,3].sort(comparator)
 *
 * @param Function getSortable
 *   A function that should return the element that is
 *   to be sorted. The comparator will run on the
 *   current collection, but you may want the actual
 *   resulting sort to occur on a parent or another
 *   associated element.
 *
 *   E.g. $('td').sortElements(comparator, function(){
 *      return this.parentNode;
 *   })
 *
 *   The <td>'s parent (<tr>) will be sorted instead
 *   of the <td> itself.
 */
jQuery.fn.sortElements = (function() {

  var sort = [].sort;

  return function(comparator, getSortable) {

    getSortable = getSortable || function() {
      return this;
    };

    var placements = this.map(function() {

      var sortElement = getSortable.call(this),
        parentNode = sortElement.parentNode,

        // Since the element itself will change position, we have
        // to have some way of storing its original position in
        // the DOM. The easiest way is to have a 'flag' node:
        nextSibling = parentNode.insertBefore(
          document.createTextNode(''),
          sortElement.nextSibling
        );

      return function() {

        if (parentNode === this) {
          throw new Error(
            "You can't sort elements if any one is a descendant of another."
          );
        }

        // Insert before flag:
        parentNode.insertBefore(this, nextSibling);
        // Remove flag:
        parentNode.removeChild(nextSibling);

      };

    });

    return sort.call(this, comparator).each(function(i) {
      placements[i].call(getSortable.call(this));
    });

  };

})();


$('#sort').click(function() {
  $('.entry').sortElements(function(a, b) {
    return $(a).find('.times').text() > $(b).find('.times').text() ? 1 : -1;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button type="button" id="sort">sort</button>
  <div class="entry" id="lala">
    <a target="_blank" href="http://lala">lala</a>
    <span class="times">4</span> 
  </div>
  <div class="entry" id="lele">
    <a target="_blank" href="http://lele.com">lele.com</a>
    <span class="times">1</span>
  </div>
  <div class="entry" id="lolo">
    <a target="_blank" href="http://lolo">lolo.com</a>
    <span class="times">2</span>
  </div>
</div>