如何为jquery插件执行嵌套对象？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何为jquery插件执行嵌套对象？相关的知识，希望对你有一定的参考价值。
我试图学习制作一个简单的jquery插件。
这是我的代码：
$.fn.TestPlugin = function( options ) {
var setting = $.extend({
"image" : [ "image1.jpg", "image2.jpg", "image2.jpg"],
"select": [
{
"Label 1": ["opt 1", "opt 2", "opt 3"],
"Label 2": ["opt 4", "opt 5", "opt 6", "opt 7"]
}
]
}, options );
return this.each(function( index ){
$( this ).wrap( "<div class='container' id='container-"+ [index+1] +"'></div>" );
//select
var $select = "<select>";
//loop for select
$select += "</select>";
$( $select ).appendTo( "#container-"+ [index+1] +"" );
});
};
我怎样才能得到这样的结果：
<select>
<optgroup label="Label 1">
<option>opt 1</option>
<option>opt 2</option>
<option>opt 3</option>
</optgroup>
<optgroup label="Label 2">
<option>opt 4</option>
<option>opt 5</option>
<option>opt 6</option>
<option>opt 7</option>
</optgroup>
</select>
源自setting.select
谢谢
对不起我的英语很难理解我使用谷歌翻译。
答案
我会直接使用jQuery创建元素。然后，正如您已经评论过的那样，遍历您的设置，创建选择，选择组和选项：
$.fn.TestPlugin = function( options ) {
var setting = $.extend({
"image" : [ "image1.jpg", "image2.jpg", "image2.jpg"],
"select": [
{
"Label 1": ["opt 1", "opt 2", "opt 3"],
"Label 2": ["opt 4", "opt 5", "opt 6", "opt 7"]
}
]
}, options );
return this.each(function( index ){
$( this ).wrap( "<div class='container' id='container-"+ [index+1] +"'></div>" );
for (var i = 0; i < setting.select.length; i++) { // iterate all select definitions
var sel = setting.select[i];
var $select = $("<select />"); // create a select element
for (var lbl in sel) { // iterate all labels
if (!sel.hasOwnProperty(lbl)) { // ignore inherited members
continue;
}
var opt = sel[lbl];
var $optgrp = $('<optgroup />').attr('label', lbl).appendTo($select); // create optgroup and add to select
for (var j = 0; j < opt.length; j++) { // iterate options
$('<option />').text(opt[j]).appendTo($optgrp); // create option and add to optgroup
}
}
$select.appendTo( "#container-"+ [index+1] +"" );
}
});
};
$('ul>li>div').TestPlugin();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div>Select 1</div>
</li>
<li>
<div>Select 2</div>
</li>
<li>
<div>Select 3</div>
</li>
</ul>以上是关于如何为jquery插件执行嵌套对象？的主要内容，如果未能解决你的问题，请参考以下文章
如何为 Freewall jQuery 插件创建 Angular 指令