How can I add value of data attribute in another div?

user_5611077 0
Viewed 163

I have a div like this:

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

Inside this div I have added another div using jQuery:

Here's the jQuery:

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

After I run this jQuery a div is added:

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

Now I'm trying to get the value of data-price attribute to show inside the div(with class show-price with this jQuery:

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

But this is not working. It should show something like this:

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

How can I do like this.

html jquery
3 Answers

You could use jQuery.data() to get the data attribute and .find() to only update the element with show-price class which is descendant:

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>

And this could be improved doing the prepend with the data value all in one go:

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>

user_15408540

You can use simply this code 

$(".button").click(function(){
  alert("Value: " + $(".show-price").val());
});
user_120033280

You this in click event is referring to button only.

So you have to do something like this

jQuery('.button').click(function() {
  var itemprice = jQuery('.banner-list-img').attr('data-price');
  jQuery('.show-price').html(itemprice);
})

Above code only works for one li element. If there are multiple li elements you should use this code

jQuery('.button').click(function() {
  jQuery('.banner-list-img').each(function() {
      var itemprice = jQuery(this).attr('data-price');
      jQuery(this).children('.show-price').html(itemprice);
  })
})

After updating question

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

Or more better way for your example

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

Here we are adding HTML when prepending div inside li

user_39168310
Related