从使用地图创建的对象中获取最高值

Question

我已将带有嵌套 div 的 div 动态添加到 dom。这些具有数据属性： data-name-nr, data-model, data-price.

我想要的是将“data-price”的最高值从所有“data-div”中的每个数组中取出。在我的示例中，最后一个

中有两个嵌套的 div

更多解释：在我的示例中，我有三个带有“frame”类的 div = 我需要一个包含三个值的数组。实际上，晚上的时间在 1 到 10 之间，甚至更多。

所以我的例子的结果是

let array = [100,150,200]
or
let object = {1:100,2:150,3:200} //from the name-nr

到目前为止，我只设法映射了data-items 我尝试了map.get 和其他人，他们都给了我错误，我不知道我应该去哪个方向。请问您能帮忙吗？

例子：

HTML

    <div class="flex">
<div class="frame" data-name-nr="1">
  <div class="border" data-name-nr="1" data-price="100" data-div="1/1"></div>
</div>
<div class="frame" data-name-nr="2">
  <div class="border" data-name-nr="2" data-price="150" data-div="1/1"></div>
</div>
<div class="frame" data-name-nr="3">
  <div class="border fifty" data-name-nr="3" data-price="100" data-div="1/2"></div>
  <div class="border fifty" data-name-nr="3" data-price="200" data-div="2/2"></div>
</div>
</div>

JS

function functionName() {
   jQuery( ".frame .box" ).map(function() {

  const key = ['name','model','price']
  let values = [[jQuery(this).data("name-nr"),( jQuery(this).data('div')),( jQuery(this).data('price'))]]
  let result = values.map(row =>
    row.reduce((acc, cur, i) =>
      (acc[key[i]] = cur, acc), {}))
  console.log(result[0])
})
}

$(document).on('click', '.click', functionName)

控制台

Object { name: 1, model: "1/1", price: 100 }  
Object { name: 2, model: "1/1", price: 150 } 
Object { name: 3, model: "1/2", price: 100 } 
Object { name: 3, model: "2/2", price: 200 }

https://jsfiddle.net/mik_a/a6jt7kb0/

Answer 1

由reducing创建一个哈希表到具有唯一names且价格最高的哈希，然后根据需要将它们取出到数组中。

请看下面的演示：

function functionName() {
  let hash = jQuery(".frame .box").map(function() {
    return {
      name: jQuery(this).data("name-nr"),
      model: jQuery(this).data('div'),
      price: jQuery(this).data('price')
    };
  }).get().reduce(function(p,c){
      if((p[c.name] && p[c.name].price < c.price) || !p[c.name])
        p[c.name] = c
      return p;
  },Object.create(null));
  let result = Object.keys(hash).map(function(e) {
     return hash[e];
  });
  console.log(result);
}

$(document).on('click', '.click', functionName)

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 300px;
}

.frame {
  outline: 1px solid red;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.box {
  border-top: 1px solid green;
}

.fifty {
  height: 50%;
}

button {
  width: 100px;
  height: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="frame" data-name-nr="1">
    <div class="box" data-name-nr="1" data-price="100" data-div="1/1"></div>
  </div>
  <div class="frame" data-name-nr="2">
    <div class="box" data-name-nr="2" data-price="150" data-div="1/1"></div>
  </div>
  <div class="frame" data-name-nr="3">
    <div class="box fifty" data-name-nr="3" data-price="100" data-div="1/2"></div>
    <div class="box fifty" data-name-nr="3" data-price="200" data-div="2/2"></div>
  </div>
</div>
<button class="click" value="CLICK">
click
</button>

以及 ES6 版本：

function functionName() {
  let hash = jQuery(".frame .box").map(function() {
    return {
      name: jQuery(this).data("name-nr"),
      model: jQuery(this).data('div'),
      price: jQuery(this).data('price')
    };
  }).get().reduce((p, c) => {
    if ((p[c.name] && p[c.name].price < c.price) || !p[c.name])
      p[c.name] = c;
    return p;
  }, Object.create(null));
  let result = Object.keys(hash).map(e => hash[e]);
  let sum = Object.keys(hash).map(e => hash[e].price).reduce((p,c) => p + c, 0);
  console.log(result, sum);
}

$(document).on('click', '.click', functionName)

.flex{display:flex;align-items:center;justify-content:center;width:400px;height:300px}.frame{outline:1px solid red;flex:1;display:flex;flex-direction:column;height:100%}.box{border-top:1px solid green}.fifty{height:50%}button{width:100px;height:35px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="frame" data-name-nr="1">
    <div class="box" data-name-nr="1" data-price="100" data-div="1/1"></div>
  </div>
  <div class="frame" data-name-nr="2">
    <div class="box" data-name-nr="2" data-price="150" data-div="1/1"></div>
  </div>
  <div class="frame" data-name-nr="3">
    <div class="box fifty" data-name-nr="3" data-price="100" data-div="1/2"></div>
    <div class="box fifty" data-name-nr="3" data-price="200" data-div="2/2"></div>
  </div>
</div>
<button class="click" value="CLICK">
click
</button>

Answer 2

您可以选择框架，然后缩小内框：

$('.frame').map(function() {
    const biggerBox = $(this).find('.box').toArray().reduce((bigger, current) => 
        $(bigger).data('price') > $(current).data('price') ? bigger : current)
    const data = $(biggerBox).data()
    console.log({ name: data.nameNr, price: data.price, div: data.div })
})

使用小提琴中的叉子：https://jsfiddle.net/zmq5jdh5/