如何根据子元素值对父元素进行排序？

Question

我有一个评论列表，每个评论都有一个投票计数（正面或负面）。我试图提取前两个评论（基于最高净票数，而不是投票数），复制他们的HTML，并将它们添加到标题为“顶级创意”的新部分

我想复制

中编号最大的两个评论的全部内容

HTML（过度简化版）...每个评论都会重复这个：

<div class="comment">
    <div class="thumbblock">
        <div class="ratingtext">
            <div>
                <span class="num-total" data-voteup="8" data-votedown="4">+4</span>
            </div><!-- END random div -->
        </div><!-- END ratingtext -->
    </div><!-- END thumbblock -->
    <p>comment text</p>
</div><!-- END comment -->

jQuery的：

jQuery(document).ready(function($) {
    //number of top comments to show
    var showResults = 2;

    //loop through each total rating
    //only pull the top two (in this case)
    $('span.num-total').slice(0, showResults).each(function(index){

        //calculate the net vote total based on data-voteup and data-votedown
        var upVotes = $(this).data('voteup');
        var downVotes = $(this).data('votedown');
        var netVotes = upVotes - downVotes;

        //get the HTML for those comments
        var commentHTML = $(this).parents('.comment').html();

        //append that HTML to the top comment div
        $('div.top-comments').append('<div class="comment">' + commentHTML + '</div>');

    });
});

在此处查看实时副本：http://jobelty.com/company/apple
jQuery来自一个名为top-comments.js的文件

Answer 1

你在排序之前将列表缩小，所以最多你会得到两个评论恰好位于顶部的文本。

获取两个排名最高的评论的完整评论元素的版本，并将其复制到.top-comments：

jQuery(document).ready(function ($) {
    //number of top comments to show
    var showResults = 2;

    var ordered = [];

    // grab all the comments
    var comments = $('.commentlist .comment');

    $.each(comments,

    function (i, v) {
        // for each comment
        var cmt = $(v);
        var nums = cmt.find('.num-total');
        var upVotes = nums.data('voteup');
        var downVotes = nums.data('votedown');
        var netVotes = upVotes - downVotes;

        var pos = ordered.length;

        // find the first place in the ordered list it fits
        for (var j = 0; j < ordered.length; ++j) {
            if (ordered[j].votes < netVotes) {
                pos = j;
                break;
            }
        }

        // save element and count for later
        var vote = {
            'votes': netVotes,
            'cmt': cmt
        };

        ordered[pos] = vote;
    });

    var n = Math.min(2, ordered.length);

    // grab the first (up to) 2 and append to .top-comments    
    for (var i = 0; i < n; ++i) {
        ordered[i].cmt.clone().appendTo($('.top-comments'));
    }
});

Answer 2

从我可以告诉你的一切都工作，除了你确定前两个评论是什么的部分。这是一种基于对注释元素进行排序的方法。代码未经测试：

jQuery(document).ready(function($) {
    //number of top comments to show
    var showResults = 2;

    var netVotes = function(domElm) {          
        var upVotes = domElm.data('voteup');
        var downVotes = domElm.data('votedown');
        return upVotes - downVotes;
    };

    var sortedComments = $('span.num-total').slice(0).sort(function(a,b) {
        return netVotes(a) - netVotes(b);
    });

    sortedComments.slice(0, showResults).each(function(index){
        var commentHTML = $(this).parents('.comment').html();
        $('div.top-comments').append('<div class="comment">' + commentHTML + '</div>');
    });
});

Answer 3

尝试

$(function(){
    var voteels = $('.comment .num-total');

    var array = voteels.get();
    array.sort(function(a1, a2){
        var v1 = ($(a1).data('voteup') || 0) - ($(a1).data('votedown') || 0);
        var v2 = ($(a2).data('voteup') || 0) - ($(a2).data('votedown') || 0);

        return v1 < v2;
    });
    $(array.slice(0, 2)).closest('.comment').clone().appendTo('#top')
})

演示：Fiddle