установить атрибут 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>');

Я посмотрел на несколько потоков о том, как это сделать, и попробовал несколько вещей, но ничего не работает ....

Я нашел это: Как установить атрибуты данных в элементах HTML и другие похожие потоки, но не совсем такие же или достаточно, чтобы понять это ,

Это создает несколько сеток, но не вкладок. Чтобы было ясно, если я создаю элементы HTML в файле PHP (жестко закодированные), мои вкладки загружаются правильно, но если я пытаюсь динамически создавать вкладки на основе цикла for, мои вкладки не создаются.

вместо

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