如何在另一个div中添加数据属性的值？
如何在另一个div中添加数据属性的值？
提问于 2020-05-14 17:23:55
我有一个这样的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>我怎么能这样做呢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-05-14 17:35:52
您可以使用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>
Stack Overflow用户
发布于 2020-05-14 17:29:54
您可以简单地使用以下代码
$(".button").click(function(){
alert("Value: " + $(".show-price").val());
});Stack Overflow用户
发布于 2020-05-14 17:33:00
单击事件中的this只涉及按钮。
所以你必须做这样的事情
jQuery('.button').click(function() {
var itemprice = jQuery('.banner-list-img').attr('data-price');
jQuery('.show-price').html(itemprice);
})上面的代码只适用于一个li元素。如果有多个li元素，则应使用以下代码
jQuery('.button').click(function() {
jQuery('.banner-list-img').each(function() {
var itemprice = jQuery(this).attr('data-price');
jQuery(this).children('.show-price').html(itemprice);
})
})更新问题后
jQuery('.banner-list-img').each(function() {
var itemprice = jQuery(this).attr('data-price');
jQuery(this).children('.show-price').html(itemprice);
})或者更好的方式来实现您的示例
jQuery('.banner-list-img').each(function() {
jQuery(this).prepend('<div class="show-price">' + jQuery(this).attr('data-price') + '</div>');
})这里我们在li中添加前缀div时添加超文本标记语言
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61793780
复制相关文章
相似问题
腾讯云开发者
