Extract values from attribute selector

Question

I'm new to jQuery selectors. How can I extract the values from an attribute?

Given:

<div class='container'>
<div class='entry' data-name='foo'></div>
<div class='entry' data-name='bar'></div>
<div class='entry' data-name='baz'></div>
</div>

I'd want to extract: ['foo','bar','baz']

I had expected to be able to iterate through something like jQuery('.entry')[0].attr('data-name') but that doesn't seem to work. Nor does jQuery('.entry')[0].attributes.data-name — Peter
– Peter, Commented Nov 24, 2014 at 4:40

Arun P Johny · Accepted Answer · 2014-11-24 04:39:15Z

2

You can use .map() to create an array from a set of dom elements like

var array = $('.container .entry').map(function () {
    return $(this).data('name')
}).get();

answered Nov 24, 2014 at 4:39

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Arun P Johny Over a year ago

@diEcho that depends on whether OP wants an array or a string... from ['foo','bar','baz'] it looks like OP wants an array

Anik Islam Abhi · Accepted Answer · 2014-11-24 04:43:23Z

1

try this

$(function () {
    var array = [];
    $(".entry").each(function () {
        array.push($(this).data("name"));
    });
    console.log(array);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='entry' data-name='foo'></div>
<div class='entry' data-name='bar'></div>
<div class='entry' data-name='baz'></div>
</div>

answered Nov 24, 2014 at 4:43

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Comments

xkeshav · Accepted Answer · 2014-11-24 04:47:46Z

1

Try

var name = [];
$('div.container').children().map(function() {  
    name.push($(this).data('name'));
});

Working DEMO

answered Nov 24, 2014 at 4:47

xkeshav

54.2k47 gold badges183 silver badges256 bronze badges

2 Comments

jasonscript Over a year ago

If you're using map no need to create an array variable

xkeshav Over a year ago

name is an array varaible

Collectives™ on Stack Overflow

Extract values from attribute selector

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related