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

Posted 2023-05-09

【中文标题】如何为 jquery 插件执行嵌套对象？

【英文标题】：How to execute nested objects for jquery plugins?

【发布时间】：2019-08-21 02:57:15

【问题描述】：

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

谢谢

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

【参考方案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>