javascript - 如何为 jquery 插件执行嵌套对象？

Question

我试着学习制作一个简单的 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 生成

谢谢

对不起，我的英语很难理解我使用谷歌翻译。

Answer 1

我会直接使用 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>