Jquery select multiple classes and extract data

Question

I want to extract data from data- tags within multiple class elements. Is the each() function the best way to do this?

Jquery:

$('#copymodal').on('show.bs.modal', function (event) {

            $(".copy19").each(function(){
                var a = data('total');
                alert(a);
            });
       })

HTML:

<a class='copy19' href='#'            
      data-statementid="14"
      data-total="98078"
      data-toggle="modal" 
      data-target="#editmodal">
      Edit
</a>

<a class='copy19' href='#'            
      data-statementid="16"
      data-total="78078"
      data-toggle="modal" 
      data-target="#editmodal">
      Edit
</a>

Possible duplicate of [Get list of data-\* attributes using javascript / jQuery](https://stackoverflow.com/questions/4187032/get-list-of-data-attributes-using-javascript-jquery) — evilReiko, Mar 26 '19 at 08:54

score 1 · Answer 1 · answered Mar 26 '19 at 08:39

extract data from data- tags within multiple class elements

Use .map() to get an array of values back: http://api.jquery.com/jquery.map/

var totals = $(".copy19").map(function(i, e) {
    return $(e).data("total");
}).get();

console.log(totals)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class='copy19' href='#'            
      data-statementid="14"
      data-total="98078"
      data-toggle="modal" 
      data-target="#editmodal">
      Link
</a>

<a class='copy19' href='#'            
      data-statementid="16"
      data-total="78078"
      data-toggle="modal" 
      data-target="#editmodal">
      Link
</a>

deviprsd · Answer 2 · 2019-03-26T08:43:06.673

0

Yes, each is one of the ways to do it as $('.copy19') returns a list of elements (basically an array).

edited Mar 26 '19 at 08:43

answered Mar 26 '19 at 08:39

deviprsd

378
3
12

2

For me itsn't :D the other answer shows the best way. – Zakaria Acharki Mar 26 '19 at 08:40

score 0 · Answer 3 · answered Mar 26 '19 at 08:52

$(".copy19").each(function() {
    // Like this:
    var statementid = $(this).data('statementid');
    var total = $(this).data('total');
    var toggle = $(this).data('toggle');
    var target = $(this).data('target');

    // or like this..

    var allData = $(this)[0].dataset;
    /* value of allData is object with attributes:
    allData = {
        statementid: "14",
        total: "98078",
        toggle: "modal",
        target: "#editmodal"
    }
    */
});

Jquery select multiple classes and extract data

3 Answers3