Can't select data attribute from html

Question

I have this HTML:

    <div class="ac-users ac-appender">
        <div class="chip" data-id="3069243" data-text="">IBM(3069243)
            <i class="material-icons close">close</i>
        </div>
        <div class="chip" data-id="6640418" data-text="">INTC(6640418)
            <i class="material-icons close">close</i>
        </div>
        <div class="chip" data-id="1452690" data-text="">RJF(1452690)
            <i class="material-icons close">close</i>
        </div>
    </div>

I need to select from this and get an array of the data-id. $('.chip') selects the array of chips effectively, but I am not able to extract the values of data-id(s)

With jquery I am using the following but it only brings back the first item:

    $('.chip').attr("data-id");

how are you getting the data-id?

guradio
– guradio

2016-09-14 03:03:56 +00:00
Commented Sep 14, 2016 at 3:03 — guradio
– guradio, Commented Sep 14, 2016 at 3:03
can you paste you jquery code here?

MKB
– MKB

2016-09-14 03:06:27 +00:00
Commented Sep 14, 2016 at 3:06 — MKB
– MKB, Commented Sep 14, 2016 at 3:06
$('.chip').attr("data-id"); only brings back the first item

Jeff
– Jeff

2016-09-14 03:08:46 +00:00
Commented Sep 14, 2016 at 3:08 — Jeff
– Jeff, Commented Sep 14, 2016 at 3:08
$('.chip').data('id')

j08691
– j08691

2016-09-14 03:09:05 +00:00
Commented Sep 14, 2016 at 3:09 — j08691
– j08691, Commented Sep 14, 2016 at 3:09
iterate over it

guradio
– guradio

2016-09-14 03:11:02 +00:00
Commented Sep 14, 2016 at 3:11 — guradio
– guradio, Commented Sep 14, 2016 at 3:11

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

var arr = $('.chip').map(function() {

  return $(this).attr('data-id');

}).get();

console.log(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ac-users ac-appender">
  <div class="chip" data-id="3069243" data-text="">IBM(3069243)
    <i class="material-icons close">close</i>
  </div>
  <div class="chip" data-id="6640418" data-text="">INTC(6640418)
    <i class="material-icons close">close</i>
  </div>
  <div class="chip" data-id="1452690" data-text="">RJF(1452690)
    <i class="material-icons close">close</i>
  </div>
</div>

Use .map()

Description: Translate all items in an array or object to new array of items.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 14, 2016 at 3:12

guradio

15.6k4 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff Over a year ago

Awesome. Thank You

Mouad Debbar · Accepted Answer · 2016-09-14 03:11:48Z

1

var dataIds = $('.chip').map(function(i, chip) {
  return chip.getAttribute('data-id');
});

answered Sep 14, 2016 at 3:11

Mouad Debbar

3,2462 gold badges22 silver badges22 bronze badges

1 Comment

Jeff Over a year ago

Awesome. Thank You

Pierre · Accepted Answer · 2016-09-14 03:43:01Z

1

How about this:

$(".chip").map(function() { return $(this).data('id') } ).get();

It gets all elements of class "chip" then calls a function on each element to get the data-id and creates an array of the format:

[3069243, 6640418, 1452690]

answered Sep 14, 2016 at 3:43

Pierre

2,99230 silver badges48 bronze badges

Collectives™ on Stack Overflow

Can't select data attribute from html

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related