Question

我需要帮助按viewcount排序一些youtube视频，这是我用来在网站上嵌入带有视觉观看次数和标题的youtube视频的脚本（对不起，如果它有点乱）：

<script>
$.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=Qq7mpb-hCBY&key=[key]', function(data){
    $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=mxHB21dKmkw&key=[key]', function(data2){
        {$('body').append('<div class = videoframe><div class = video><iframe src=https://www.youtube.com/embed/XGSy3_Czz8k width = 98.5% height = 140 allowfullscreen =allowfullscreen></iframe><div class = counter>'+data.items[0].statistics.viewCount +'</div><div class = title>'+ data2.items[0].snippet.title+'</div></div></div>');}
    });
});
</script>

想象一下，在该脚本中放置了100多个YouTube视频（放在我的身体中），我想要一个按钮，按下按钮，按视图计数对YouTube视频进行排序。

我对Jquery不是很有经验，这就是为什么我在这个很棒的论坛/帮助服务上寻求帮助的原因。我理解Jquery的整个“排序协议”，但还不足以理解在这种情况下如何做到这一点。

Answer 1

您可以使用.sort()函数，但它是一个适用于数组的javascript函数，因此您需要将所有元素放在一个数组中。为此，您可以使用.get() jquery函数，该函数获取一组jquery对象并将其转换为DOM元素数组。

全部放在一起......

$('button#views').click(function() {

    // Get all your videoframe divs and convert it in an array of DOM elements.
    var videos = $('div.videoframe').get();

    // Sort the array based in the value of the div.counter value (descendent).
    videos.sort(function(a,b) {
        return parseInt($(b).find('div.counter').text()) - parseInt($(a).find('div.counter').text());
    });

    // Replace current content with the new ordered set of elements.
    $('body').html($(videos));

});

这里有一个小提琴示例...... https://fiddle.jshell.net/rigobauer/858u58a7/3/

<强> EDITED ：

显然，您希望所有div.videoframe容器都在容器div内。最简单的方法是在HTML代码中创建空容器（将其定位在您希望添加内容的位置），然后将响应添加到该容器而不是直接添加到body。如果由于某种原因你无法修改HTML，你可以在getJSON调用之前用jQuery添加该容器（这里你有一个例子，你将它添加到body元素的末尾）。 ..

<script>
$('body').append('<div class="container"></div>');
$.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=Qq7mpb-hCBY&key=[key]', function(data) {
    $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=mxHB21dKmkw&key=[key]', function(data2) {
        $('div.container').append('<div class = videoframe><div class = video><iframe src=https://www.youtube.com/embed/XGSy3_Czz8k width = 98.5% height = 140 allowfullscreen =allowfullscreen></iframe><div class = counter>'+data.items[0].statistics.viewCount +'</div><div class = title>'+ data2.items[0].snippet.title+'</div></div></div>');
    });
});
</script>

......排序代码会稍微改变一下......

$('button#views').click(function() {

    // Get all your videoframe divs and convert it in an array of DOM elements.
    var videos = $('div.container div.videoframe').get();

    // Sort the array based in the value of the div.counter value (descendent).
    videos.sort(function(a,b) {
        return parseInt($(b).find('div.counter').text()) - parseInt($(a).find('div.counter').text());
    });

    // Replace current content with the new ordered set of elements.
    $('div.container').html($(videos));

});

在同一个脚本中排序很多数字

1 个答案: