Retrieving data attributes of all child elements in jQuery

Question

I want to get all data attribute of child elements in the form of an array.

I tried with

"data_array" : $('#rule-list').children().data('fruits')


 <div class="fruit-list" id="fruit-list">
        <span class="chips" title="Click to remove" data-fruit="apple,mango; pineapple, watermelon">every month for 5 times</span>
        <span class="chips" title="Click to remove" data-fruit="banana,kiwi">every May and November for 5 times</span>
    </div>

the expected output should be

data_array = [[apple,mango; pineapple, watermelon],[banana,kiwi]]

brk · Accepted Answer · 2017-04-16 06:57:18Z

4

You can do like this

var fruitArray=[] // Array to contain array of fruits
// will get all children
var getChild = $("#fruit-list").children();
// loop over them
getChild.each(function(i,v){
// push in fruits array, an array of data-fruit
fruitArray.push([($(v).data('fruit'))])
})
console.log(fruitArray)

DEMO

answered Apr 16, 2017 at 6:57

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

Comments

gyre · Accepted Answer · 2017-04-16 07:02:35Z

Since you want to return the attribute values of each array element rather than that of a single element, you cannot use jQuery#data(key) (because it only returns the data-* attribute of the first element in the jQuery collection).

I would suggest using getAttribute within a call to Array#map instead:

var fruitList = document.getElementById('fruit-list')

var dataArray = [].map.call(fruitList.children, function (e) {
  return e.getAttribute('data-fruit')
})

console.log(dataArray)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fruit-list" id="fruit-list">
        <span class="chips" title="Click to remove" data-fruit="apple,mango; pineapple, watermelon">every month for 5 times</span>
        <span class="chips" title="Click to remove" data-fruit="banana,kiwi">every May and November for 5 times</span>
    </div>

caramba · Accepted Answer · 2017-04-16 06:54:22Z

1

var elements = document.querySelectorAll('[data-fruit]');
var result = [];
for(var i=0; i < elements.length; i++) {
    result.push([elements[i].dataset.fruit]);
}

console.log(result);

<div class="fruit-list" id="fruit-list">
<span class="chips" title="Click to remove" data-fruit="apple,mango; pineapple, watermelon">every month for 5 times</span>
<span class="chips" title="Click to remove" data-fruit="banana,kiwi">every May and November for 5 times</span>
</div>

answered Apr 16, 2017 at 6:54

caramba

22.5k20 gold badges94 silver badges134 bronze badges

Comments

guest271314 · Accepted Answer · 2017-04-16 07:13:58Z

You can use selector "#fruit-list [data-fruit]" $.map(), .match() with RegExp /\w+/ as parameter to match one or more word characters, return an array with return value of .match() to get result of multi-dimensional array

var arr = $.map($("#fruit-list [data-fruit]"), function(el) {
  return Array($(el).data("fruit").match(/\w+/g))
});

console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fruit-list" id="fruit-list">
  <span class="chips" title="Click to remove" data-fruit="apple,mango; pineapple, watermelon">every month for 5 times</span>
  <span class="chips" title="Click to remove" data-fruit="banana,kiwi">every May and November for 5 times</span>
</div>

Collectives™ on Stack Overflow

Retrieving data attributes of all child elements in jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related