排序在同一個腳本

Question

我需要幫助的觀看次數排序一些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，你可以使用jQuery添加容器getJSON電話（在這裏你有一個例子，你把它添加到年底的OD 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)); 

});