Question

我试图在另一个div中添加一个div，这两个div都是动态创建的。老实说，我不确定为什么不在newDiv

中添加它

(function ($){
    $.fn.dropdown = function(){

        return this.each(function(){

            //Gather information
            var id = $(this).attr("id");

            //Get the original selection and keep it as a reference
            var original = $(this);

            //Create a new div with a predefined class and taking the ID from the original HTML.
            var newDiv = $("<div id='"+id+"' class='dropDownJs' />");

            //Remove the id from the original HTML
            original.removeAttr("id");

            //Encapsulate the original dropdown with a new parent div
            original.wrap(newDiv);

            //Create children divs within the parent div for each option within the selection HTML.
            original.children().each(function(){

                //Grab crucial values from the original.
                //The value of the option
                var val = $(this).val();

                //The text from the option (label)
                var text = $(this).text();


                //Child divs to create
                var child = $("<div class='dropDownJsChild'></div>");

                newDiv.append(child);

            });

        });
    }
}(jQuery))

出于所有密集目的，这个jQuery正在操纵这个HTML片段

<select id="test" class="dropdown">
    <option value="something1">Something 1</option>
    <option value="something2">Something 2</option>
    <option value="something3">Something 3</option>
</select>

进一步澄清：

<script>
    $(document).ready(function(){
        $(".dropdown").dropdown();
    });
</script>

不幸的是，newDiv.add(child)不起作用，我也尝试过newDiv.append(child)，但也失败了。

Answer 1

编辑：事实证明，OP正在尝试创建无效的HTML结构，在div标签中包装选项标签或其他任何内容，所以让我们关闭这个

不要创建一个与现有ID相同的div，并像这样包装它们：original.wrap(newDiv);在此之前删除id

其次，你使用的是不是你想要的add函数，而是使用append：

newDiv.append(child);

add函数扩展了子节点的jquery对象newDiv。追加将元素移动到DOM中的其他元素。

Answer 2

您需要使用original元素的after方法：

var child = $("<div class='dropDownJsChild' />");
original.after(child);

从wrap的文档中可以明白您无法使用newDiv附加新元素的原因：

此结构的副本将包含在匹配元素集中的每个元素周围。

因此包装元素不再是原始元素，它是它的副本，并不代表原始节点。

在另一个先前动态创建的div中添加动态div

2 个答案: