用jQuery对重复列表中的元素排序
用jQuery对重复列表中的元素排序
提问于 2014-06-05 15:48:28
我试图通过注释-ID对.depth-3元素进行排序，并按升序显示它们。ul类.children重复并在所有深度使用，但只需要对.depth-3元素进行排序(因为其中一些元素是对彼此的答复，因此不按升序显示)。
看上去如何：
<ol class="commentlist">
<li id="comment-677" class="comment byuser comment-author-admin even thread-even depth-1">
<div id="comment-677">
<div class="comment-content">comment-677
</div>
</div>
<ul class="children">
<li id="comment-678" class="comment odd alt depth-2">
<div id="comment-678">
<div class="comment-content">comment-678
</div>
</div>
<ul class="children">
<li id="comment-680" class="comment byuser comment-author-admin even depth-3" data-value="680">
<div id="comment-680">
<div class="comment-content">comment-680
</div>
</div>
</li>
<li id="comment-686" class="comment byuser comment-author-admin odd alt depth-3" data-value="686">
<div id="comment-686">
<div class="comment-content">comment-686
</div>
</div>
</li>
<li id="comment-688" class="comment byuser comment-author-admin even depth-3" data-value="688">
<div id="comment-688">
<div class="comment-content">comment-688
</div>
</div>
</li>
<li id="comment-687" class="comment byuser comment-author-admin odd alt depth-3" data-value="687">
<div id="comment-687">
<div class="comment-content">comment-687
</div>
</div>
</li>
<li id="comment-689" class="comment byuser comment-author-admin even depth-3" data-value="689">
<div id="comment-689">
<div class="comment-content">comment-689
</div>
</div>
</li>
<li id="comment-684" class="comment byuser comment-author-admin odd alt depth-3" data-value="684">
<div id="comment-684">
<div class="comment-content">comment-684
</div>
</div>
</li>
</ul>
</li>
<li id="li-comment-681" class="comment byuser comment-author-admin even depth-2">
<div id="comment-681">
<div class="comment-content">comment-681
</div>
</div>
<ul class="children">
<li id="li-comment-682" class="comment byuser comment-author-admin odd alt depth-3" data-value="682">
<div id="comment-682">
<div class="comment-content">comment-682
</div>
</div>
</li>
<li id="li-comment-690" class="comment byuser comment-author-admin even depth-3" data-value="690">
<div id="comment-690">
<div class="comment-content">comment-690
</div>
</div>
</li>
<li id="li-comment-683" class="comment byuser comment-author-admin odd alt depth-3" data-value="683">
<div id="comment-683">
<div class="comment-content">comment-683
</div>
</div>
</li>
<li id="li-comment-685" class="comment byuser comment-author-admin even depth-3" data-value="685">
<div id="comment-685">
<div class="comment-content">comment-685
</div>
</div>
</li>
<li id="li-comment-691" class="comment byuser comment-author-admin odd alt depth-3" data-value="691">
<div id="comment-691">
<div class="comment-content">comment-691
</div>
</div>
</li>
</ul>
</li>
</ul>
<li id="li-comment-679" class="comment byuser comment-author-admin odd alt thread-odd thread-alt depth-1">
<div id="comment-679">
<div class="comment-content">comment-679
</div>
</div>
<ul class="children">
<li id="li-comment-692" class="comment byuser comment-author-admin even depth-2">
<div id="comment-691">
<div class="comment-content">comment-691
</div>
</div>
</li>
</ul>
</li>
我想让它看起来像：
<ol class="commentlist">
<li id="677" class="comment byuser comment-author-admin even thread-even depth-1">
<div id="comment-677">
<div class="comment-content">comment-677
</div>
</div>
<ul class="children">
<li id="comment-678" class="comment odd alt depth-2">
<div id="comment-678">
<div class="comment-content">comment-678
</div>
</div>
<ul class="children">
<li id="680" class="comment byuser comment-author-admin even depth-3" data-value="680">
<div id="comment-680">
<div class="comment-content">comment-680
</div>
</div>
</li>
<li id="comment-684" class="comment byuser comment-author-admin even depth-3" data-value="684">
<div id="comment-684">
<div class="comment-content">comment-684
</div>
</div>
</li>
<li id="comment-686" class="comment byuser comment-author-admin odd alt depth-3" data-value="686">
<div id="comment-686">
<div class="comment-content">comment-686
</div>
</div>
</li>
</ul>
</li>
<li id="li-comment-681" class="comment byuser comment-author-admin even depth-2">
<div id="comment-681">
<div class="comment-content">comment-681
</div>
</div>
<ul class="children">
<li id="li-comment-682" class="comment byuser comment-author-admin odd alt depth-3" data-value="682">
<div id="comment-682">
<div class="comment-content">comment-682
</div>
</div>
</li>
<li id="li-comment-683" class="comment byuser comment-author-admin odd alt depth-3" data-value="683">
<div id="comment-683">
<div class="comment-content">comment-683
</div>
</div>
</li>
<li id="li-comment-690" class="comment byuser comment-author-admin even depth-3" data-value="690">
<div id="comment-690">
<div class="comment-content">comment-690
</div>
</div>
</li>
</ul>
</li>
</ul>
<li id="li-comment-679" class="comment byuser comment-author-admin odd alt thread-odd thread-alt depth-1">
<div id="comment-679">
<div class="comment-content">comment-679
</div>
</div>
<ul class="children">
<li id="li-comment-692" class="comment byuser comment-author-admin even depth-2">
<div id="comment-691">
<div class="comment-content">comment-691
</div>
</div>
</li>
</ul>
</li>
我的尝试，它得到正确的顺序，但是所有的元素都在每个ul中重复。
var $wrapper = $( '.children' );
$wrapper.find('.depth-3').sort(function (a, b) {
return +a.dataset.value - +b.dataset.value;
})
.appendTo( $wrapper );这是一个小提琴
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-05 16:08:41
这就是你想要的吗？(jsFiddle演示)
$(".depth-2").each(function(){
var children = $(this).find(".depth-3").sort(function (a, b) {
return +a.dataset.value - +b.dataset.value;
});
$(this).children(".children").empty().append(children);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24064670
复制相关文章
相似问题
腾讯云开发者
