jQuery - 使用子 div 值对父 div 进行排序不起作用

Posted 2023-05-09

【中文标题】jQuery - 使用子 div 值对父 div 进行排序不起作用

【英文标题】：jQuery - Sorting Parent Div with children div values not working

【发布时间】：2021-09-27 00:57:31

【问题描述】：

我有一个包含 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>

【参考方案1】：

这里有几个问题。首先，因为您要多次附加具有相同 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>

【讨论】：

嗨@Rory McCrossan。只是好奇，为什么在我的公式中用类替换 ID 时它不起作用？ var markup = ''; brandArrayKeys = Object.keys(brandArray) jQuery.each(brandArrayKeys, function(index, value) markup += '<div class="brandblock">'markup += '<div class="rank">' + brandArray[value][0].Rank + '</div>'markup += '<div class="rank">' + brandArray[value][0].Parameter + '</div>'markup += '</div>'); $("#list").html(markup);