生成されたコンテンツの親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：私は<div class="craft shop" qnt="1"></div>を使用する場合

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"> 
    <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"ですが、私はそれを選択するには問題があります。 2番目のブロックが最初のものと同じqunatityをどのように使用しているかを確認してください。

は、私はすでに試した：

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属性の値を取得します。そして、同じ名前を持つすべてのdivに同じHTMLコンテンツを追加したすべてのdivにhtmlを設定するために、その名前を再び使用します。 各divのバルブを取得し、それに応じてhtmlを追加するには、特定のクラス名で選択されたすべての要素を調べるための別のループが必要です。

私は $.each()

を使用しています。このため

はこれを試してみてください。 。。 `;あなたは、` VAR量= $（この）.parent（）親（）ATTR（ "QNT"）を使用しました

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>