[英]Reorder DIV's based on element attributes
I'm not sure how to go about doing this. 我不知道该怎么做。 Let's say I have the following HTML code:
假设我有以下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>
Using jQuery, how could I order these divs based on the attribute "order"? 使用jQuery,我怎么能根据属性“order”来订购这些div? By reorder, I mean I would like the dom to update the order of the divs based on the attribute "order".
通过重新排序,我的意思是我希望dom根据属性“order”更新div的顺序。 This would naturally adjust the z-index of the divs as well.
这自然会调整div的z指数。 I know that setting the z-index based on the attribute order will give me the correct display in the browser window, but it won't manipulate the dom order.
我知道根据属性顺序设置z-index将在浏览器窗口中显示正确的显示,但它不会操纵dom顺序。
I assume I would loop through #container and get the child and its order like so: 我假设我会遍历#container并得到孩子及其顺序如下:
$('#container > div').each( function(event) {
var itemOrder = $(this).attr('order');
});
...but I'm at a loss on how to manipulate the order. ......但我对如何操纵订单感到茫然。 Any help would be greatly appreciated.
任何帮助将不胜感激。
You can do this : 你可以这样做 :
$('#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'));
});
Try to look here. 试着看看这里。 Could be useful for understanding fundamental principles.
可能有助于理解基本原则。 http://james.padolsey.com/javascript/sorting-elements-with-jquery/
http://james.padolsey.com/javascript/sorting-elements-with-jquery/
Here is how to sort divs by attribute "tag" as a single word. 以下是如何按属性“tag”将div排序为单个单词。 JSFiddle has code to check for multiple words, etc. Posting because couldn't find solution when I was looking for it.
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/ http://jsfiddle.net/zyEwF/269/
Demo of sorting by attribute value that is not a number and creates new div to add those sorted elements into. 按属性值排序的演示,该属性值不是数字,并创建新的div以将这些已排序的元素添加到其中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.