Question

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

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

中有两个嵌套的div

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

所以我的例子的结果将是

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

到目前为止，我只设法映射data-item 我试过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

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

$('.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/

Answer 2

按reducing创建一个哈希表到具有最大价格的唯一name s的哈希，然后根据需要将它们带到数组中。

见下面的演示：

＆＃13;

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)

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

和ES6版本：

＆＃13;

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)

＆＃13;

.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}

＆＃13;

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

＆＃13;

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

2 个答案: