からタブのhtmlデータを動的に作成しようとしていますvar options = {}
。
tabs_html()
オプションを反復処理し、html のネストされたデータを作成する必要がある関数で立ち往生しています。以下を参照してください。
js で html コードを使用するのではなく、$('<ul/>'
や などのオブジェクトを使用して作成します$('<li/>'
。
JS: JSFIDDLE
var structure = [
{
"title": "tabs-1",
"data": {
"type": "t1",
"title": "title hover"
},
"content": "Some Content"
},
{
"title": "tabs-2",
"data": {
"type": "t2",
"title": "title2 hover"
},
"content": "Some Content2"
}];
function tabs_html(structure) {
var id = "tabs";
var $wrapper_div = $('<div/>', {
id: id
});
$.each(structure) {
// make ul li and div
// Not use html , instead use objects like $('<ul/>' and $('<li/>'
// id of li`s will be id+_1 id+2 etc
}
$wrapper_div.append(above_each_data)
return $wrapper_div;
}
$("body").append(tabs_html(structure));
サンプル HTML 出力:
<!-- Sample Output
<div id="tabs">
<ul>
<li><a href="#tabs-1" data-type="t1" data-title="title hover" >tabs-1</a> </li>
<li><a href="#tabs-2" data-type="t2" data-title="title2 hover" >tabs-2</a> </li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
</div>
-->