如何使用 JQuery 更新数据属性？

Question

I am trying to use JQuery to update a data attribute after clicking on a button. Please take a look at what I have tried below. When I click on the div with class previous-wrapper , the whole block is well updated, and the data-nb -attribute get the correct value. But, when I click on this div for the second time, data-nb -attribute gets the value NaN. .
Is there another way to dynamically update and retrieve the value of this attribute?

 $(function(){ $(document).on('click','.previous-wrapper',function(){ var get_nb = $(this).find('.previous'); get_nb = get_nb.data("nb"); get_nb = parseInt(get_nb) //Dom to update arr_left = $('<i/>', { className: 'fa-solid fa-arrow-left' }); previous = $('<div/>', { className: 'previous', 'data-nb': get_nb-5, html: "Previous" }); //Question 2. How to append previous to arrow_left $(".previous-wrapper").html(previous); }); });

 .previous-wrapper{ cursor: pointer; background:red; width:100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="previous-wrapper"> <i class="fa-solid fa-arrow-left"></i> <span class="previous" data-nb="100">Previous</span> </div>

I would also like to know how to add multiple DOM created by JQuery.

Answer 1

You're overwriting the HTML with an invalid attribute of "classname" instead of "class", which means on the second interation $('.previous') won't match anything.

Corrected version of your code:

 $(function() { $(document).on('click', '.previous-wrapper', function() { var get_nb = $(this).find('.previous'); get_nb = get_nb.data("nb"); get_nb = parseInt(get_nb) //Dom to update arr_left = $('<i/>', { class: 'fa-solid fa-arrow-left' }); previous = $('<div/>', { class: 'previous', 'data-nb': get_nb - 5, html: "Previous" }); // including both elements at once: $(".previous-wrapper").html([arr_left, previous]); console.log($('.previous-wrapper').html()) }); });

 .previous-wrapper { cursor: pointer; background: red; width: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="previous-wrapper"> <i class="fa-solid fa-arrow-left"></i> <span class="previous" data-nb="100">Previous</span> </div>

It would be much, much simpler, however, to simply update the one attribute you want to update, instead of rewriting all the HTML every click:

 $(function() { $(document).on('click', '.previous-wrapper', function() { let el = $(this).find('.previous') // update the data attribute using.attr() instead of.data() because jQuery handles.data internally; it's not reflected in the DOM el.attr('data-nb', Number(el.attr('data-nb')) - 5); console.log($('.previous-wrapper').html()) }); });

 .previous-wrapper { cursor: pointer; background: red; width: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="previous-wrapper"> <i class="fa-solid fa-arrow-left"></i> <span class="previous" data-nb="100">Previous</span> </div>