设置data-options html属性

Question

我有以下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创建此文件，我尝试了以下操作：

A。

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

B。

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循环动态创建标签，则不会创建我的标签。

代替

Answer 1

您正在设置"\"foobar\""的数据属性，而不是每个"foobar"元素。请改用以下代码：

#tabPanelContainer