从 JavaScript 列表中的对象获取数据属性

Question

我有一个对象列表

[Object, Object, Object]

每个对象都有

Object {x: 1, y: 0, width: 4, height: 5, max_width: undefined…}

和其他一些参数。每个对象都是一个具有数据属性 <div id="panel" data-panel-id="2"> 的 <div> 元素。如何获取 data-panel-id 的值？

我试过了

items.forEach(function (item) {
  console.log(item);
  console.log(item.el);
  console.log(item.el.firstNode);
  console.log(item.el.firstNode.dataset);

等等

我认为如果我使用 document.getElementById("panel").dataset.panelId 会起作用，但我的列表包含对象而不是 html 元素，所以我不知道该怎么做。

我的对象列表是在 onChange 侦听器中从 gridstack.js 库 (https://github.com/troolee/gridstack.js) 创建的。

Answer 1

我从来没有在这个库上工作过，但我只是检查了这个库，发现每个项目对象在 el 属性中都有它的 DOM 节点。所以我们可以按照以下方式进行数据设置：

    items.forEach(function (item) {
     var panelId =  item.el[0].dataset['panelId'] //el[0] --> Since el is a jQuery object we need to get it's javascript object.

     //If you want to use jQuery:
     var panelId =  item.el.data('panelId');
    }

从 JavaScript 列表中的对象获取数据属性

Get data attributes from object in list in JavaScript

javascript

dataset

custom-data-attribute