如何使用jquery获取对象中元素的数据属性？

Question

I have a loop of buttons which is compiling like this

<button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button>
<button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button>
<button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button>

In Jquery I am geeting the data as this

let cat1 = $('#cat1').data('cat');
let cat2 = $('#cat2').data('cat');
let cat3 = $('#cat3').data('cat');

but this is hard coding as I know that there are these 3 ids. I want to create an object and make this thing dynamically. How to do that?

Answer 1

Create an object and then loop through elements using .each() and in loop add value of data-cat to object.

 var cats = {}; $("#cat1, #cat2, #cat3").each(function(){ cats[this.id] = $(this).data("cat"); }); console.log(cats); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button> <button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button> <button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button> 

Answer 2

Identify them by some class, I have used attribute selector for now

let arr = [];
jQuery("[data-cat]").each(function(){
  var $elt = jQuery(this);
  arr.push($elt.data(cat));//Or any other operation to be performed
})

Answer 3

If I get you correctly, you are trying to put them in an object. Assuming you know the number of buttons, this would do the job:

 var buttons = {}; var btncount = 3; // This is the number of buttons for(var i = 1; i <= btncount; i++) { buttons["cat" + i] = $("#cat" + i).data("cat"); } console.log(buttons); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button> <button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button> <button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button> 

Assuming you don't know how many buttons are there, and all buttons have the add-line , btn , btn-info and btn-sm classes, you can do this:

 var buttons = {}; var btncount = $(".add-line.btn.btn-info.btn-sm").length; // This is the number of buttons for(var i = 1; i <= btncount; i++) { buttons["cat" + i] = $("#cat" + i).data("cat"); } console.log(buttons); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button> <button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button> <button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button> 

Answer 4

Add one new class in all button dev_class. And try below code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-line btn btn-info btn-sm dev_class" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button>
<button class="add-line btn btn-info btn-sm dev_class" id="cat2" data-cat="[8,9]">cat2</button>
<button class="add-line btn btn-info btn-sm dev_class" id="cat3" data-cat="[10,11]">cat3</button>


// Gets the number of elements with class dev_class
var numItems = $('.dev_class').length;
var vars = {};
var newCount = 0;
$('.dev_class').each(function(){
    newCount++;
  vars['cat' + newCount] =  $('#cat'+newCount).data('cat');
});
console.log(vars);