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

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>

现在我试图获取要在 div 内显示的 data-price 属性的值(使用带有此 jQuery 的 show-price 类:

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>

我怎样才能这样做。

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>