[英]Reorder DIV's based on element attributes
我不知道該怎么做。 假設我有以下HTML代碼:
<div id="container">
<div class="item" order="5"></div>
<div class="item" order="3"></div>
<div class="item" order="4"></div>
<div class="item" order="1"></div>
<div class="item" order="2"></div>
</div>
使用jQuery,我怎么能根據屬性“order”來訂購這些div? 通過重新排序,我的意思是我希望dom根據屬性“order”更新div的順序。 這自然會調整div的z指數。 我知道根據屬性順序設置z-index將在瀏覽器窗口中顯示正確的顯示,但它不會操縱dom順序。
我假設我會遍歷#container並得到孩子及其順序如下:
$('#container > div').each( function(event) {
var itemOrder = $(this).attr('order');
});
......但我對如何操縱訂單感到茫然。 任何幫助將不勝感激。
你可以這樣做 :
$('#container').append($('#container .item').sort(function(a,b){
return a.getAttribute('order')-b.getAttribute('order');
}));
$('#container > div').each( function(event) {
$(this).css('z-index', $(this).attr('order'));
});
試着看看這里。 可能有助於理解基本原則。 http://james.padolsey.com/javascript/sorting-elements-with-jquery/
我想你想要這個:DEMO
$('#container > div').sortElements(function(a, b){
return parseInt($(a).attr('order')) > parseInt($(b).attr('order')) ? 1 : -1;
});
以下是如何按屬性“tag”將div排序為單個單詞。 JSFiddle有代碼來檢查多個單詞等。發布因為我在尋找它時無法找到解決方案。
<div id="tag_sections">
<!-- populated with sorted divs -->
</div>
<div id="all_tags">
<div data-tag="blue">8</div>
<div>1</div>
<div data-tag="tag">2</div>
<div data-tag="red">3</div>
<div data-tag="blue">4</div>
<div>5</div>
<div data-tag="red">6</div>
<div data-tag="blue">7</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// sort all by title tag
var allTags = [];
$('#all_tags div').each(function() {
theTag = $(this).attr('data-tag');
if (!theTag) { theTag = 'ungrouped'; }
if (!$('#'+theTag).length) {
allTags.push(theTag);
$('#tag_sections').append('<div id="'+theTag+'"><h3>'+theTag+'</h3></div>');
}
if ($.inArray(theTag, allTags) > -1) {
$('#tag_sections #'+theTag).append($(this));
}
});
</script>
http://jsfiddle.net/zyEwF/269/
按屬性值排序的演示,該屬性值不是數字,並創建新的div以將這些已排序的元素添加到其中。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.