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

Question

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

Answer 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>