Question

我有一个对象列表，每个对象都有一个配置列表。现在，我将它们存储在列表项中

openjdk version "1.7.0_181"
OpenJDK Runtime Environment (Zulu 7.23.0.1-macosx) (build 1.7.0_181-b01)
OpenJDK 64-Bit Server VM (Zulu 7.23.0.1-macosx) (build 24.181-b01, mixed mode)

现在，如果我尝试使用dom = '<ul class="obj-list">'; for (let i = 0; i < obj.length; i++) { dom += `<li tabindex="${i}" data-index="${i}" data-resource-config="${obj[i].configs}"访问它们，则会显示attr。

当我单击上面构建的[object object]时，我尝试从ul进行访问

attr

我做错了什么？我不能在$(e.currentTarget).attr('data-resource-config') attr中存储对象数组吗？

Answer 1

您需要对对象进行字符串化，以便将其存储在属性中：

dom = '<ul class="obj-list">';
for (let i = 0; i < obj.length; i++) {
    dom += `<li
    tabindex="${i}"
    data-index="${i}"
    data-resource-config="${JSON.stringify(obj[i].configs)}"

模板字符串尝试将${}中的数据转换为字符串：

var obj = {
  a: 5
};
$("div").html(`<span data-obj=${obj}>SPAN</span>`);
console.log($("span").attr("data-obj"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

var obj = {
  a: 5
};
$("div").html(`<span data-obj=${JSON.stringify(obj)}>SPAN</span>`);
console.log($("span").attr("data-obj"));
console.log(JSON.parse($("span").attr("data-obj")));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

Answer 2

您可以将对象作为元素的data-*属性存储，但只能使用jQuery，并且仅在使用jQuery .data方法时才可以存储。如果将HTML构造为 string ，则将获得对象的字符串表示形式，通常为[object Object]。

const config = { key: "value" }

const htmlString = `<span data-config="${config}">Some text</span>`;

console.log("This is the HTML that jQuery will use to generate the DOM elements from:\n", htmlString);

因此，相反，只需使用jQuery API创建DOM元素即可：

const obj = [
  { configs: { name: "one" } },
  { configs: { name: "two" } },
  { configs: { name: "three" } }
];

let dom = $("<ul>") //create a `<ul></ul>` element
  .addClass("obj-list");

for (let i = 0; i < obj.length; i++) {
  let child = $("<li>") //create an `<li></li>` element
    .attr("tabindex", i) //set the `tabindex` attribute
    .data("index", i) //set the `data-index` attribute
    .data("resource-config", obj[i].configs) // set the `data-resource-config` attribute to an object
    .text(i); //just for better display

  dom.append(child); //attach to the ul element
}

$("body").append(dom); //attach to the body

const config = $("[tabindex='1']") //lookup the second generated li
  .data("resource-config"); //get the object associated with `data-resource-config`
  
console.log("config is of type:", typeof config);
console.log("config is:", config)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

再次注意，将对象存储为data-*属性仅可通过jQuery进行工作-jQuery本身存储对象值-通常情况并非如此：

const plainHtmlObject = document.createElement("span");

//set the data-conf property
plainHtmlObject.dataset.conf = { element: "plain" }; 

//read the data-conf property
const plainConf = plainHtmlObject.dataset.conf;

console.log("plainConf is of type:", typeof plainConf);
console.log("plainConf is:", plainConf)

const jQueryObject = $("<span>")
  .data("conf", { element: "jQuery" }) //set the data-conf property

//read the data-conf property
const jQueryConf = jQueryObject.data("conf");

console.log("jQueryConf is of type:", typeof jQueryConf);
console.log("jQueryConf is:", jQueryConf);

//however, you can wrap an element in jQuery object

const plainToJQueryObject = $(plainHtmlObject);

//set the data-conf property
plainToJQueryObject.data("conf", { element: "turned into jQuery" }); 

//read the data-conf property
const plainToJQueryConf = plainToJQueryObject.data("conf");

console.log("plainToJQueryConf is of type:", typeof plainToJQueryConf);
console.log("plainToJQueryConf is:", plainToJQueryConf);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

无法访问jQuery数据属性中存储的对象数组

2 个答案: