我有以下 div 布局:
<div class="container">
<div class="entry">
<div class="title">World</div>
<div class="description">text1</div>
</div>
<div class="entry">
<div class="title">hello</div>
<div class="description">text2</div>
</div>
<div class="entry">
<div class="title">Lorem</div>
<div class="description">text3</div>
</div>
</div>
我想根据子 title
div 的内容按字母顺序对 entry
div 进行排序。
到目前为止我尝试了什么
这将按字母顺序排序:
var alphabeticallyOrderedDivs = $('.title').sort(function(a, b) {
return String.prototype.localeCompare.call($(a).text().toLowerCase(), $(b).text().toLowerCase());
});
var container = $(".container");
container.detach().empty().append(alphabeticallyOrderedDivs);
$('body').append(container);
但它会去除description
div。尝试 jsFiddle demo .
如何在不删除任何内容的情况下按字母顺序对 div 进行排序?
最佳答案
您的逻辑是正确的,但问题是您正在对 .title
元素进行排序。相反,您需要对 .entry
元素进行排序,然后在当前 .entry
中找到 .title
并对它们的文本值进行比较.试试这个:
var alphabeticallyOrderedDivs = $('.entry').sort(function(a, b) {
var $aTitle = $(a).find('.title'), $bTitle = $(b).find('.title');
return String.prototype.localeCompare.call($aTitle.text().toLowerCase(), $bTitle.text().toLowerCase());
});
var container = $(".container");
container.detach().empty().append(alphabeticallyOrderedDivs);
$('body').append(container);
.entry {
border: 1px solid #CCC;
padding: 5px;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="container">
<div class="entry">
<div class="title">World</div>
<div class="description">text1</div>
</div>
<div class="entry">
<div class="title">hello</div>
<div class="description">text2</div>
</div>
<div class="entry">
<div class="title">Lorem</div>
<div class="description">text3</div>
</div>
</div>
关于javascript - 按字母顺序对嵌套的 div 进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44110967/