jquery - jQuery - 使用子 div 值对父 div 进行排序不起作用
问题描述
我有一个包含 2 个值的数组,“Rank”和“Parameter”,我正在循环以在父 Div 中创建多个 Div。
jQuery(document).ready(function ($) {
var BrandArray = {
"Brand1" : [{"Parameter":"XXX", "Rank":"#3"}],
"Brand2" : [{"Parameter":"AAA", "Rank":"#2"}],
"Brand3" : [{"Parameter":"MMM", "Rank":"#1"}],
}
var markup = '';
BrandArrayKeys = Object.keys(BrandArray)
jQuery.each(BrandArrayKeys, function(index, value){
markup += '<div id="BrandBlock">'
markup += '<div>' + BrandArray[value][0].Rank + '</div>'
markup += '<div>' + BrandArray[value][0].Parameter + '</div>'
markup += '</div>'
});
$("#list").html(markup);
});
然后我在此之后使用排序函数以确保它显示为按 Rank 排序
jQuery(document).ready(function ($) {
var sortedList = $('#BrandBlock').toArray().sort(function(lhs, rhs){
return $(lhs).find("#Rank").text().replace( /^\D+/g, '') - $(rhs).find("#Rank").text().replace( /^\D+/g, '');
});
console.log(sortedList)
$("#list").empty().html(sortedList);
});
这不起作用,页面中只出现一个“Div”。但是,当 DIV 表已经驻留在 HTML 本身而不是由 jQuery 构建时,此公式有效。
我哪里错了?
在下面找到整个工作代码:
jQuery(document).ready(function($) {
var BrandArray = {
"Brand1": [{
"Parameter": "XXX",
"Rank": "#3"
}],
"Brand2": [{
"Parameter": "AAA",
"Rank": "#2"
}],
"Brand3": [{
"Parameter": "MMM",
"Rank": "#1"
}],
}
var markup = '';
BrandArrayKeys = Object.keys(BrandArray)
jQuery.each(BrandArrayKeys, function(index, value) {
markup += '<div id="BrandBlock">'
markup += '<div>' + BrandArray[value][0].Rank + '</div>'
markup += '<div>' + BrandArray[value][0].Parameter + '</div>'
markup += '</div>'
});
$("#list").html(markup);
});
jQuery(document).ready(function($) {
var sortedList = $('#BrandBlock').toArray().sort(function(lhs, rhs) {
return $(lhs).find("#Rank").text().replace(/^\D+/g, '') - $(rhs).find("#Rank").text().replace(/^\D+/g, '');
});
$("#list").empty().html(sortedList);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="list"></div>
解决方案
这里有几个问题。首先是因为您要id
多次附加相同的元素。id
属性在 DOM中必须是唯一的。这需要更改为一个类。
其次,您的排序逻辑期望每个元素中都有#BrandBlock
一个 id的元素Rank
,但是这不存在,如果存在,您将再次重复标识符并导致相同的问题。更改逻辑以按类排序,并将类添加到 HTML。
有了这些修复,代码就可以工作了。请注意,我还通过使用map()
,Object.entries()
和一些箭头函数使其更简洁。
jQuery($ => {
let brandArray = {Brand1:[{Parameter:"XXX",Rank:"#3"}],Brand2:[{Parameter:"AAA",Rank:"#2"}],Brand3:[{Parameter:"MMM",Rank:"#1"}]};
let markup = Object.entries(brandArray).map(([key, obj]) => `<div class="brandblock"><div class="rank">${obj[0].Rank}</div><div>${obj[0].Parameter}</div></div>`);
$("#list").html(markup);
var sortedList = $('.brandblock').sort((lhs, rhs) => $(lhs).find(".rank").text().replace(/^\D+/g, '') - $(rhs).find(".rank").text().replace(/^\D+/g, ''));
$("#list").html(sortedList);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="list"></div>
推荐阅读
- python - Python 使用带有 for 循环的三元运算符
- php - php glob - 只获取文件名,没有扩展名
- php - 在前端显示管理员使用 ACF 插件手动创建的用户的用户配置文件字段
- python - 使用python缺少json信息
- c++ - 未知类型的对齐堆分配
- pandas - 使用 panda 数据文件和多个变量在 Spyder 中绘制实时图表
- python - 我的代码的一部分不起作用,我不知道为什么(python)
- python - 所以写了这段代码来打开网络摄像头的视频,我想保存打开摄像头但文件没有停止更新的日志
- r - 无法在 m1 mac 上的 R 中安装“robustHD”
- r - 如何从一元组中删除(自定义)停用词但将它们保留在二元组中?