html - 如何在另一个 div 中添加数据属性的值？

Question

我有一个这样的div：

<div class="configurator-item">
    <ul>
        <li class="banner-list-img" data-price="122"></li>
    </ul>
</div>

在这个 div 中，我使用 jQuery 添加了另一个 div：

这是jQuery：

jQuery('li.banner-list-img').prepend(jQuery('<div class="show-price">  </div>'));

在我运行这个 jQuery 之后，添加了一个 div：

<div class="configurator-item">
    <ul>
        <li class="banner-list-img" data-price="122">
            <div class="show-price"> </div>
        </li>
    </ul>
</div>

现在我试图让 data-price 属性的值显示在 div 中（show-price使用这个 jQuery 的类：

jQuery('.banner-list-img').each(function() {
  var itemprice = jQuery(this).text();
  jQuery('.show-price').html(itemprice);
})

但这不起作用。它应该显示如下内容：

<div class="configurator-item">
    <ul>
        <li class="banner-list-img" data-price="122">
            <div class="show-price"> 122 </div>
        </li>
    </ul>
</div>

我怎么能这样。

标签： htmljquery

Answer 1

您可以使用jQuery.data()获取数据属性并.find()仅使用后代的 show-price 类更新元素：

jQuery('li.banner-list-img[data-price]').prepend(jQuery('<div class="show-price">  </div>'));

jQuery('.banner-list-img[data-price]').each(function() {
  jQuery(this).find('.show-price').html(jQuery(this).data('price'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="configurator-item">
    <ul>
       <li class="banner-list-img" data-price="122"></li>
       <li class="banner-list-img" data-price="123"></li>
       <li class="banner-list-img" data-price="124"></li>
       <li class="banner-list-img"></li>
    </ul>
</div>

这可以通过一次性使用数据值来改进：

jQuery('.banner-list-img[data-price]').each(function() {
  jQuery(this).prepend(jQuery('<div class="show-price">' + jQuery(this).data('price') + '</div>'));
})

.banner-list-img[data-price="0"] .show-price {
   display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="configurator-item">
    <ul>
       <li class="banner-list-img" data-price="122"></li>
       <li class="banner-list-img" data-price="123"></li>
       <li class="banner-list-img" data-price="124"></li>
       <li class="banner-list-img"></li>
       <li class="banner-list-img" data-price="0"></li>
    </ul>
</div>