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]]
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]]
Share
Improve this question
edited Apr 16, 2017 at 7:09
gyre
16.8k4 gold badges40 silver badges47 bronze badges
asked Apr 16, 2017 at 6:49
Code GuyCode Guy
3,1985 gold badges42 silver badges95 bronze badges
4 Answers
Reset to default 4You 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
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./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>
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>
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./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>