基于内部div文本，使用JS或Jquery对div进行排序

Question

我正在尝试对名为#searchResultsWrapper的div容器中的一类div进行排序。我知道我在排序函数中引用的元素是正确的，并且是整数。我只是不确定为什么它不起作用。

var sortedResults = $('#searchResultsWrapper').children().sort(function(a,b){
if(a.getElementsByClassName('searchResultKeywordCount')[0].innerHTML < b.getElementsByClassName('searchResultKeywordCount')[0].innerHTML)
{
return 0;
}
else
{
return 1;
}
});

$('#searchResultsWrapper').empty();
$('#searchResultsWrapper').append(sortedResults);

我的HTML如下：

<div id="searchResultsWrapper">
<div class="searchResultWrapper">
<div class="searchResultMenuBar">
<div class="searchResultMenuBarAddButton"></div>
</div>
<h1 class="searchResultHeading">some doc heading</h1>
<div class="searchResultTextWrapper">
<div class="searchResultText">
some text
</div>
<div class="searchResultKeywordCount">
5
</div>
</div>
</div>
<div class="searchResultWrapper">
<div class="searchResultMenuBar">
<div class="searchResultMenuBarAddButton"></div>
</div>
<h1 class="searchResultHeading">some doc heading</h1>
<div class="searchResultTextWrapper">
<div class="searchResultText">
some text
</div>
<div class="searchResultKeywordCount">
3
</div>
</div>
</div>
</div>

我期望div的列表根据我在.searchResult子类.searchResultKeywordCount中的隐藏div进行重新排列。

Answer 1

需要注意的事项：

• .innerHTML将返回一个字符串，因此需要将其转换为数字。您可以使用Number()
• CCD_ 6可能具有空白，这可能会产生不想要的问题。在转换之前，您必须对其进行修剪

在循环中操作DOM元素时，最好查看DocumentFragment。这是一种优化技术，因为DOM元素的突变将触发重新绘制和回流

const parent = document.getElementById('searchResultsWrapper')
const allDivs = parent.querySelectorAll('.searchResultWrapper')
const fragment = new DocumentFragment()
const getInnerValue = (div) => Number(
div.querySelector('.searchResultKeywordCount').innerText.trim()
)
Array
.from(allDivs)
.sort((a, b) => getInnerValue(a) - getInnerValue(b))
.forEach((elm) => fragment.append(elm))
parent.innerHTML = ''
parent.append(fragment)

<div id="searchResultsWrapper">
<div class="searchResultWrapper">
<div class="searchResultMenuBar">
<div class="searchResultMenuBarAddButton"></div>
</div>
<h1 class="searchResultHeading">some doc heading</h1>
<div class="searchResultTextWrapper">
<div class="searchResultText">
some text
</div>
<div class="searchResultKeywordCount">
5
</div>
</div>
</div>
<div class="searchResultWrapper">
<div class="searchResultMenuBar">
<div class="searchResultMenuBarAddButton"></div>
</div>
<h1 class="searchResultHeading">some doc heading</h1>
<div class="searchResultTextWrapper">
<div class="searchResultText">
some text
</div>
<div class="searchResultKeywordCount">
3
</div>
</div>
</div>
</div>