在生成的內容中選擇父div屬性

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> 

我試圖從屬性顯示的數量「qnt」，但我有問題選擇它。 看看第二塊如何使用第一塊塊的相同質量？

我已經嘗試過：

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

，並沒有奏效。

實例codepen：https://codepen.io/RHenri/pen/BWNVpw

Answer 1

基本上你需要一個又一個循環在時間選擇一個特定的實例。這樣你就可以根據特定的div應用數量和其他值。

您正在使用$（「。craft。」+ items ['item']）。attr（「qty」）從總是返回與該類名匹配的第一個div的div獲取qty屬性的值。然後再次使用該名稱將html設置爲所有div，該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>