设置数据选项 html 属性答案

【问题标题】：set data-options html attribute设置数据选项 html 属性
【发布时间】：2018-12-11 23:59:13
【问题描述】：

我有以下 HTML

<div id="tabPanelContainer">
    <div id="Tab1" data-options="dxItem: { title: 'Tab1' }">
        <div id="gridContainer1"></div>
    </div>
    <div id="Tab2" data-options="dxItem: { title: 'Tab2' }" >
        <div id="gridContainer2"></div>
    </div>
</div>

我想使用 js 或 jquery 创建这个我尝试了以下方法：

一个。

var tabs = $('#tabPanelContainer').data("options","dxItem: { title:  "+tabId+" }");
$(tabs).append('<div id='+gridId+'></div>');

var tabs = $('#tabPanelContainer').attr({ 'data-options': 'dxItem: { title: "+tabId+" }' });
$(tabs).append('<div id='+gridId+'></div>');

我已经查看了多个线程以了解如何执行此操作并尝试了多种方法，但没有任何效果....

我发现了这个：How to set data attributes in HTML elements 和其他类似线程，但 不太一样 或足以弄清楚。

这会创建多个网格，但不会创建选项卡。所以要清楚，如果我在 PHP 文件（硬编码）上创建 HTML 元素，那么我的选项卡会正确加载，但是如果我尝试基于 for 循环动态创建选项卡，我的选项卡不会被创建。

代替

【问题讨论】：

你有什么问题？上面的代码不起作用吗？（我知道不是，但你的问题不清楚）
您好，山姆，感谢您的帮助。我添加了更多说明。我也尝试了提供的代码，但它仍然无法正确创建选项卡。我还添加了一些图片，说明当我检查一个与另一个时 html 的外观...感谢您尝试帮助我

标签： javascript jquery html attr

【解决方案1】：

您正在设置#tabPanelContainer 的数据属性，而不是每个div 元素。请改用此代码：

var tabs = $("#tabPanelContainer"); // <div id="tabPanelContainer">
var tab = $("<div>", { id: tabId }); // <div id="Tab1">
tab.attr("data-options", "dxItem: { title: '" + tabId + "' }");
tab.append($("<div>", { id: gridId })); // <div id="gridContainer2">
$(tabs).append(tab);

【讨论】：

你好 Martin 我试过了，但还是不行。它也只创建了没有选项卡的网格......就像它不识别 dx 项目的数据选项一样。感谢您的帮助。