文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery -对子Div值不起作用的父分区进行排序

问jQuery -对子Div值不起作用的父分区进行排序
EN

Stack Overflow用户

提问于 2021-07-19 10:46:06

回答 1查看 100关注 0票数 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>

jquery

arrays

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-19 11:33:40

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68439185

复制

相似问题

问jQuery -对子Div值不起作用的父分区进行排序
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery -对子Div值不起作用的父分区进行排序EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery -对子Div值不起作用的父分区进行排序
EN