Javascript jQuery向父级添加元素_Javascript_Jquery_Html

Javascript jQuery向父级添加元素

javascript jquery html

Javascript jQuery向父级添加元素,javascript,jquery,html,Javascript,Jquery,Html,我在弄清楚如何在单击事件中将元素添加到父对象时遇到了一些问题我希望达到的结果是： <ul> <li><button>B1</button> <ul class="newul"> <li><button>B1.1</button> <ul class="newul">

我在弄清楚如何在单击事件中将元素添加到父对象时遇到了一些问题

我希望达到的结果是：

<ul>
        <li><button>B1</button>
            <ul class="newul">
                <li><button>B1.1</button>
                    <ul class="newul">
                        <li><button>1.1.1</button></li>
                        <li><button>1.1.2</button></li>
                    </ul>
                </li>
                <li><button>B1.1</button></li>
            </ul>
        </li>
        <li><button>B2</button></li>
        <li><button>B3</button></li>
</ul>


B1

B1.1

1.1.1
1.1.2


B1.1


B2
B3

假设我单击按钮B2。我想要一个新的UL添加到该按钮的父LI，然后能够向新创建的UL添加新的LI元素。我希望这是有道理的

所以，基本上，点击按钮，将新的UL类“newul”添加到您当前所在的LI->将新的LI添加到新创建的UL

我当前使用的jquery如下所示：

$('button').click(function(){
    //Get parent..
        var parent = $(this).parent();
        //Add a new UL to the parent and save it as newul           
        var newul = parent.add("ul");
                    //Add the class to the new UL
        newul.addClass('newul');               
        //Add a new li to the new UL            
            newli = newul.add('li');
            //Add a button to the new LI
            newli.append('<button></button>');

});

$（“按钮”）。单击（函数（）{
//得到父母。。
var parent=$（this.parent（）；
//将新UL添加到父级并将其另存为newul
var newul=父项添加（“ul”）；
//将该类添加到新的UL
newul.addClass（“newul”）；
//将新li添加到新UL
newli=newul.add（'li'）；
//将按钮添加到新LI
newli.append（“”）；
});

不幸的是，这是有完全不希望的效果和粘按钮无处不在的地方。如果你能提供帮助，我将不胜感激

这是一个明显的例子，说明了我所追求的。顶部是我想要达到的效果

$（“按钮”）。单击（函数（）{
$('button').click(function(){
         //Get parent..
        var parent = $(this).parent();

        //Add a new UL to the parent and save it as newul           
        var newul = $("<ul/>");

        //Add the class to the new UL
        newul.addClass('newul');               

        //Add a new li to the new UL            
        var newli = $('<li/>');

        //Add a button to the new LI
        newli.append('<button></button>');

        // add ul to parent li
        parent.append( newul.append( newli ) );

});

//得到父母。。
var parent=$（this.parent（）；
//将新UL添加到父级并将其另存为newul
var newul=$（“”）；
//将该类添加到新的UL
newul.addClass（“newul”）；
//将新li添加到新UL
var newli=$（“”）；
//将按钮添加到新LI
newli.append（“”）；
//将ul添加到父li
parent.append（newul.append（newli））；
});

这里的问题是您正在使用而不是

.add（）

将传递的元素添加到当前选择中

.after（）

在当前选择后添加传递的元素

使用

.after（）

，我们可以将您的脚本简化为一行代码：

$('button').click(function(){
    $(this).after('<ul class="newul"><li><button></button></li></ul>');
});

$（“按钮”）。单击（函数（）{
$（此）.after（'ul class=“newul”>）；
});

由于

.after（）

在当前元素旁边插入内容，因此无需获取

.parent（）

.after（）

可以获取完整的HTML字符串，因此无需使用jQuery操作类并添加子元素

我在这里看到的一个问题是，创建的新按钮不会绑定单击事件。我通过在上使用

并将事件设置为委托来解决这个问题。这样做时，我给外部ul
一个容器的id
。我还检查以确保您尚未添加ul
元素，如果它不在li
中，则添加一个元素
$（“#容器”）。在（“单击”，“按钮.newbtn”，函数（）上{
var parent=$（this）.closest（'li'）；
var childUl=parent.children（'ul'）；
如果（childUl.length==0）{
附加（“”；
childUl=父项。子项（'ul'）；
}
附加（$（“”+$（this.html（）+”+（childUl.children（）.length+1）+“”）；
});
尽管如此。没有解释为什么你的代码会失败，我想这就是你想要的答案
您的代码中有几个问题：
首先
'ul'
是一个选择器，因此将在DOM中搜索其他
元素，而不是创建一个新元素。另外，parent.add（）
方法返回的是parent
对象，而不是您选择的ul
正确代码：
//Add a new UL to the parent and save it as newul           
var newul = $("<ul>").appendTo(parent);

//Add a new li to the new UL         
var newli = $("<li>").appendTo(newul);

同样的问题再次出现，而且由于newul
实际上仍然是parent
的父母，你会得到各种类型的疯狂。另外，您缺少了一个var
，但也许我没有得到您的闭包
正确代码：
//Add a new UL to the parent and save it as newul           
var newul = $("<ul>").appendTo(parent);

//Add a new li to the new UL         
var newli = $("<li>").appendTo(newul);

您可以将“body”
选择器更改为更具体的选项，这样就不会在每次单击页面时都查询到该选项。只需确保将类ul appending
添加到此处理程序未生成的所有现有按钮
对动态添加的元素使用函数
你可以用这样的东西
$(document).ready(function(){
    i = 1;
    $('body').on("click","button",function(event){
        $(this).after('<ul class="newul"><li><button>TestButton'+i+'</button></li></ul>');
        i++;
    });
});

$（文档）.ready（函数（）{
i=1；
$（'body'）。在（“单击”，“按钮”，函数（事件）{
$（this）.after（“测试按钮“+i+””）；
i++；
});
});

这是你的电话号码。使用css和相应的按钮值调整按钮
 此外，这不会将此单击事件添加到正在创建的按钮中。但我不认为这是你的问题。如果我想让每个按顺序添加的按钮也响应单击事件，我需要编辑什么？@user1489130我会明确地将其添加到我的答案中，但你应该确保+1，因为它指出了这一点。@merv，我已经检查过你的jsfillde，它的工作正常高达100次ul li，而在它不工作之后，我需要相同的输出高达n次ul li，你能帮我做些什么吗that@nim这听起来像是一个有效的独立问题，而不是附加在这个问题上。当然，您可以在新问题中始终引用此选项。我还建议在
中添加一个类，然后在on（）
方法中添加选择器，以防将来该容器中可能会有其他按钮。
$('button').click( function() {

  $(this).parent()
    .append(
      $('<ul class="newul"><li><button></li></ul>')
    );
});

$('body').on('click', 'button.ul-appending', function() {

  $(this).parent()
    .append(
      $('<ul class="newul"><li><button class="ul-appending"></li></ul>')
    );
});

$(document).ready(function(){
    i = 1;
    $('body').on("click","button",function(event){
        $(this).after('<ul class="newul"><li><button>TestButton'+i+'</button></li></ul>');
        i++;
    });
});