如何基於的是裏面的一類值的div排序的div

我的HTML是這樣的：如何基於的是裏面的一類值的div排序的div

<div class="comment_div"> 
     <span class="upvotes">4</span> 
</div> 

<div class="comment_div"> 
     <span class="upvotes">7</span> 
</div> 

<div class="comment_div"> 
     <span class="upvotes">2</span> 
</div>

的.upvotes的價值，所以我想JS/jQuery來的div排序基於值是動態那時候。我將如何做到這一點？

來源

2017-02-21 Zorgan

看着tinysort http://tinysort.sjeiti.com – Geoff

如果它們都是一樣的，就像你在問題中展示它們一樣，那麼只需在填充div之前對數據進行排序即可。 – rasmeister

提醒您Stack Overflow不是免費的編碼服務。你應該做研究，嘗試一個解決方案，然後尋求幫助。 –

你可以試試下面的代碼嗎？

divArr = $(".comment_div") 
divArr.sort(function(a, b) { 
     return $(a).find("span").text() > $(b).find("span").text() ? 1: -1; 
    }) 
$("body").append(divArr)

假設你的html格式如下：

<body> 
     <div class="comment_div"> 
      <span class="upvotes">4</span> 
     </div> 

     <div class="comment_div"> 
      <span class="upvotes">7</span> 
     </div> 

     <div class="comment_div"> 
      <span class="upvotes">2</span> 
     </div> 
</body>

如果你的HTML是動態的，可以再次重新運行代碼片段&訴諸使用新值的div。

js上面的回答詳細的jsFiddle鏈接; https://jsfiddle.net/1gn7no8s/

來源

2017-02-21 00:14:43

沒有效果。 – Zorgan

@Zorgan啊，你想排序的HTML？我以爲你只想得到對div的引用。 –

是的，我想要整個divs進行排序並相應移動。 – Zorgan

你可以做到以下幾點：

選擇所有的div到jQuery對象。
在JQuery對象上調用.get()以獲取div的數組。使用Array.prototype.sort()函數對數組中的div進行排序。
通過將div數組傳遞到$()來創建另一個JQuery對象。

代碼：

var divs = $('.comment_div').get(); 
divs.sort(function(div1, div2) { 
    function getValue(div) { return parseInt($(div).children('span:first').text(), 10); } 
    var val1 = getValue(div1), val2 = getValue(div2); 
    return (val1 > val2) ? 1 : ((val1 < val2) ? -1 : 0); 
}); 
var $sortedDivs = $(divs);

jsfiddle

注：

jQuery有一個.sort()功能，但它沒有記錄，所以它可能是最好不要使用它。
我假設這些值是數字，應該按照這種排序，所以你需要將它們轉換爲數字，否則你會將它們排序爲字符串。

來源

2017-02-21 00:36:34

謝謝你的工作。還有一些其他的東西無法正常工作，所以我會回來問。 – Zorgan

如何基於的是裏面的一類值的div排序的div

回答

相關問題