jQuery向父级添加元素

Question

我在查找如何在click事件上向父对象添加元素时遇到了一些麻烦。

我希望实现的结果是：

<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>

假设我点击按钮B2。 我希望将新的UL添加到该按钮的父LI，然后能够将新的LI元素添加到新创建的UL中。 我希望这是有道理的！

基本上，单击按钮，将新的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>');

});

不幸的是，这产生了完全不受欢迎的影响，并且到处都是按钮。 我很感激您提供的任何帮助。

这是我所追求的一个可见的例子。 顶部是效果id喜欢实现。

期望结果的示例

Answer 1

即使@am不是我有正确的代码 。 没有解释你的代码失败的原因，我认为这就是你要求的答案。

您的代码中存在几个问题：

第一

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

'ul'是一个选择器，因此将在DOM中搜索其他<ul>元素，而不是创建一个新元素。 此外， 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            
newli = newul.add('li');

同样的问题，因为newul实际上仍然是parent你会得到各种类型的疯狂。 此外，你错过了一个var ，但也许我只是没有得到你的关闭。

正确的代码：

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

就这样。 如果您在代码中修复它，它将起作用。

但是，除非您确实需要这些引用持久化，否则如果将整个事物作为字符串传递，通常会获得更好的性能：

$('button').click( function() {

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

编辑

如果您希望所有新按钮具有相同的功能，请使用on()方法和按钮类：

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

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

您可以将'body'选择器更改为更具体的内容，以便在页面上的每次单击时都不会查询。 只需确保将类ul-appending到此处理程序未生成的所有现有按钮。

的jsfiddle

Answer 2

我在这里看到的一个问题是创建的新按钮不会将click事件绑定到它们。 我通过使用on并将事件设置为委托来解决此问题。 这样做我给外部ul一个container的id 。 我还检查以确保你还没有添加一个ul元素，如果它不在li里面，则追加一个元素。 这是一个有效的例子 。

$('#container').on("click", "button.newbtn", function(){
    var parent = $(this).closest('li');
    var childUl = parent.children('ul');
    if(childUl.length === 0) {
        parent.append("<ul class='newul'></ul>");
        childUl = parent.children('ul');       
    }
    childUl.append($("<li><button class='newbtn'>" + $(this).html() + "." + (childUl.children().length + 1) + "</button></li>"));
});​

Answer 3

$('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 ) );

});

Answer 4

这里的问题是你使用的是.add（）而不是.after （） 。

.add()将传递的元素添加到当前选择中。 .after()在当前选择之后添加传递的元素。

使用.after() ，我们可以将您的脚本简化为一个漂亮的小单行：

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

由于.after()在当前元素旁边插入内容，因此不需要获取.parent() 。 .after()可以使用完整的HTML字符串，因此不需要使用jQuery来操作类并添加子元素。

例。

Answer 5

使用.on函数动态添加元素。

你可以使用这样的东西。

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

这是DEMO 。 根据您的css和按钮值调整按钮。