根据远方孩子的价值对 Div 进行排序？

Question

我在第三方网站上有一些产品列表。所有列表都包含在.listings-list中。我试图按照#BGvaluediv 4子级的值按升序对每个.listing进行排序。

如果重要的话，每个div通常有2-3个div，每页的总列表可以达到100个。我想做一个按钮，我可以按下它来进行基于#BGvalue的排序。

我正在努力遵循本教程，并根据我的需要进行调整：https://riptutorial.com/jquery/example/11477/sorting-elements所以我的变量没有意义，因为我刚刚把我的值放入.

此外，我已经加载了jQuery，所以这里不包括它，但它可以工作。

我试过了，但目前不起作用。之前的一些迭代只在底部添加了实际的BGValue，但没有排序。

var ascending = true;
var $myColorList= $('#root > div > div > div.marketplace-panel-with-scrollbars > div > div:nth-child(1) > div > div.listings-area > div.listings-list');
var $colors = $myColorList.find( "#root > div > div > div.marketplace-panel-with-scrollbars > div > div:nth-child(1) > div > div.listings-area > div.listings-list > div:nth-child(1)" );
var sortList = Array.prototype.sort.bind($colors);
var doSort = function ( ascending ) {

sortList(function ( a, b ) {
var aText = a.find('#BGvalue')
var bText = b.find('#BGvalue')
if ( aText < bText ) {
return ascending ? -1 : 1;
}
if ( aText > bText ) {
return ascending ? 1 : -1;
}
return 0;
});

$myColorList.append($colors);
};
doSort(ascending);
//tutorial https://riptutorial.com/jquery/example/11477/sorting-elements
//main area holding items   #root > div > div > div.marketplace-panel-with-scrollbars > div > div:nth-child(1) > div > div.listings-area > div.listings-list
//items to sort             #root > div > div > div.marketplace-panel-with-scrollbars > div > div:nth-child(1) > div > div.listings-area > div.listings-list > div:nth-child(1)
//sort by                   #BGvalue

这是示例代码：

<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper>
<div class="listing-bg">
<div class"listing-info">
<div id="BGvalue">3</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper>
<div class="listing-bg">
<div class"listing-info">
<div id="BGvalue">111</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper>
<div class="listing-bg">
<div class"listing-info">
<div id="BGvalue">80</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper>
<div class="listing-bg">
<div class"listing-info">
<div id="BGvalue">1000</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
</div>

以下是的预期结果

<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper>
<div class="listing-bg">
<div class"listing-info">
<div id="BGvalue">3</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper>
<div class="listing-bg">
<div class"listing-info">
<div id="BGvalue">80</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper>
<div class="listing-bg">
<div class"listing-info">
<div id="BGvalue">111</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper>
<div class="listing-bg">
<div class"listing-info">
<div id="BGvalue">1000</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
</div>

Answer 1

几个问题：

• 给定的HTML在每次出现listing-bg-wrapper时都有未闭合的引号
• 它已在顶层打开div标签
• 它具有重复的id值("BGvalue"(。这在HTML中无效。您应该使用class属性
• 该代码似乎假设$colors具有共享同一父级的元素，并且它们可以附加到单个容器$myColorList。但事实是，$myColorList不是一个元素，每个元素都有自己的子元素。因此，如果要对该列表进行排序，则必须对$myColorList中的元素进行排序，而不是对$colors中的元素。这意味着列表的容器是$myColorList的父级。因此，我建议您将这些jQuery变量用于DOM树中高1级的内容
• a.find将不起作用，因为a(和b(不是jQuery对象，而是DOM元素。因此，您需要首先使用$(a)制作jQuery集合
• find返回的是jQuery集合，而不是文本，因此像aText < bText那样进行比较不会产生所需的效果。您需要首先使用.text()获取文本，然后将该文本转换为数字

这不是错误，但有一种更简单的方法可以使用减法来确定比较器函数的返回值。

以下是更正后的HTML(带有额外的外部div(和JavaScript:

// Simplified selector so it works with the demo HTML:
// .listings-list are the elements to be sorted, not their children.
var $colors = $('div.listings-list'); 
var $myColorList = $colors.parent(); // Container is one level up
var sortList = Array.prototype.sort.bind($colors);
function doSort(ascending) {
sortList(function (a, b) {
// Convert to jQuery, get the `.text()` and convert to number (+)
// Using class selector, no duplicate ID allowed!
var aText = +$(a).find('.BGvalue').text();
var bText = +$(b).find('.BGvalue').text();
// Simple way to define the return value
return ascending ? aText - bText : bText - aText;
});
$myColorList.append($colors);
};
doSort(true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> <!-- added this DIV -->
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper">
<div class="listing-bg">
<div class"listing-info">
<!-- Use class. No duplicate ID allowed -->
<div class="BGvalue">3</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
</div>
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper">
<div class="listing-bg">
<div class"listing-info">
<div class="BGvalue">111</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
</div>
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper">
<div class="listing-bg">
<div class"listing-info">
<div class="BGvalue">80</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
</div>
<div class="listings-list">
<div class="listing">
<div class="listing-bg-wrapper">
<div class="listing-bg">
<div class"listing-info">
<div class="BGvalue">1000</div>
</div>
<div class"listing-info2"></div>
<div class"listing-info3"></div>
</div>
</div>
</div>
</div>
</div>