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

Question

我有一个按钮循环是这样编译的

<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>

在Jquery中，我得到的数据是这样的

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

但这是硬编码，因为我知道有这 3 个 ID。我想创建一个对象并动态地制作这个东西。怎么做？

Answer 1

通过一些class来识别它们，我暂时使用属性选择器

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

Answer 2

创建一个对象，然后使用 .each() 遍历元素，并在循环中将 data-cat 的值添加到对象。

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 3

如果我没听错，你正试图将它们放入一个对象中。假设您知道按钮的数量，这将完成工作：

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>

假设您不知道有多少个按钮，并且所有按钮都有 add-line、btn、btn-info 和 btn-sm 类，你可以这样做：

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

在所有按钮 dev_class 中添加一个新的 class。并尝试下面的代码。

<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);

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

How to get data attribute of elements in object using jquery?

javascript

jquery

custom-data-attribute