Question

我正在尝试在父div中选择一个属性，但到目前为止还没有运气。

HTML：

<div class="build">
  <div class="items">
    <div class="craft shop" qnt="1"></div>
    <div class="craft shop" qnt="5"></div>
  </div>
</div>

JS：

var ITEMS = [
{
  "item":"shop",
  "prefix":"custom",
  "icon": "shop",
  "type": "shop"}];

for (var i = 0; i < ITEMS.length; i++)
{
  var items = ITEMS[i];
  var quantity = $(".craft." + items['item']).attr("qnt");
  $(".craft." + items['item']).html
  ('<a class="item-block item-' + items['type'] + '" href="' + items['prefix'] + '-' + items['item'] + '.html">'+
   '<i class="' + items['icon'] + '"></i>' +
   '<span class="name" data-i18n="' + items['item'] + '">' + items['item'] + '</span>'+
   '<span class="qnt">x' + quantity +'</span>'+
   '</a>')};

因此，当我使用<div class="craft shop" qnt="1"></div>时，它会生成：

<div class="craft shop" qnt="1">
  <a class="item-block item-shop" href="custom-shop.html">
    <i class="shop"></i><span class="name" data-i18n="shop">shop</span>
    <span class="qnt">x1</span>
  </a>
</div>

<div class="craft shop" qnt="5">
  <a class="item-block item-shop" href="custom-shop.html">
    <i class="shop"></i><span class="name" data-i18n="shop">shop</span>
    <span class="qnt">x5</span>
  </a>
</div>

我正在尝试显示属性＆＃34; qnt＆＃34;中的数量，但我在选择它时遇到问题。看看第二个块如何使用第一个块的相同元素？

我已经尝试过：

var quantity = $(this).parent().parent().attr("qnt");

它并没有奏效。

codepen中的示例：https://codepen.io/RHenri/pen/BWNVpw

Answer 1

基本上你需要另一个循环来选择一个特定的实例。这样您就可以根据特定的div来应用数量和其他值。

您正在使用$（“。craft。”+ items ['item']）。attr（“qty”）从div获取qty属性的值，该div总是返回与该类名匹配的第一个div。然后你再次使用该名称将html设置为所有div，它将相同的html内容添加到具有该特定名称的所有匹配div。要从每个div中获取阀门并相应地添加html，您需要另一个循环来遍历由特定类名选择的所有元素。

为此我正在使用$.each()

试试这个。

var ITEMS = [{
  "item": "shop",
  "prefix": "custom",
  "icon": "shop",
  "type": "shop"
}];

for (var i = 0; i < ITEMS.length; i++) {
  var items = ITEMS[i];
  var quantity = $(".craft." + items['item']).data("qnt");
  
  $(".craft." + items['item']).each(function(i, v) {
    var quantity = $(this).data("qnt");
    $(this).html('<a class="item-block item-' + items['type'] + '" href="' + items['prefix'] + '-' + items['item'] + '.html">' +
      '<i class="' + items['icon'] + '"></i>' +
      '<span class="name" data-i18n="' + items['item'] + '">' + items['item'] + '</span>' +
      '<span class="qnt">x' + quantity + '</span>' +
      '</a>')

  });
};

.item-list .item-block,
.build .item-block {
  display: block;
  color: #fff;
  margin: 0px;
  padding: 0px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.50);
  cursor: pointer;
  min-width: 220px;
  text-align: center;
  width: 300px;
}

.item-list .items .item-block i,
.build .items .item-block i {
  width: 32px;
  height: 32px;
  background-size: contain;
  float: left;
}

.item-list .item-block .name,
.build .item-block .name {
  display: inline-block;
  font-family: 'Roboto', Microsoft YaHei;
  font-size: 12px;
  line-height: 32px;
  color: #fff;
  padding: 0 5px;
  width: 135px;
  text-align: center;
}

.item-list .items .item-block i,
.build .items .item-block i {
  width: 32px;
  height: 32px;
  background-size: contain;
  float: left;
}

.none {
  display: none;
}

.item-list .item-block .qnt,
.build .item-block .qnt {
  line-height: 32px;
  display: inline-block;
  color: #ffffff;
  font-family: 'Roboto', Microsoft YaHei;
  font-weight: 400;
  padding: 0px 10px 0px 0px;
  float: right;
}

.item-shop {
  background-color: #1e7ea9;
}

.shop {
  background-image: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/64/shop-icon.png);
  background-color: #25a9ae;
}

.craft {
  background-image: none;
  display: inline-block;
  width: 300px;
  margin: 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="build">
  <div class="items">
    <div class="craft shop" data-qnt="1"></div>
    <div class="craft shop" data-qnt="5"></div>
  </div>
</div>

在for生成的内容中选择父div属性

1 个答案: