jQuery向父元素添加元素

Question

jQuery向父元素添加元素

9

我在想如何在点击事件中向父对象添加元素，遇到了一些困难。

我希望实现的结果是这样的:

<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。我想要在该按钮的父级LI中添加一个新的UL，然后能够向新创建的UL中添加新的LI元素。希望这样说得清楚明白！

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

我目前正在使用的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>');

});

很遗憾，这种情况会产生完全不希望出现的效果，并且在各个位置添加按钮。非常感谢您能提供任何帮助。

以下是我想要实现的效果的可见示例。

所需结果示例

- Sinmok

5个回答

1

我在这里看到的一个问题是，新创建的按钮将没有绑定点击事件。我通过使用on并将事件设置为委托来解决这个问题。这样做可以给外部的ul添加一个id为container。我还检查确保您尚未添加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>"));
});

- John Kalberer

1

我还建议为<button>添加一个类，并在on()方法中使用该选择器，以防将来在#container中可能会有其他按钮。 - merv

0

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

});

- thecodeparadox

0

问题在于您正在使用 .add() 而不是 .after()。 .add() 将传递的元素添加到当前选择。 .after() 在当前选择后添加传递的元素。

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

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

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

示例。

- Nathan

0

对于动态添加的元素，请使用.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++;
    });
});

这里是演示。根据您的CSS和按钮值调整按钮。

- Nishu Tayal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- merv · Accepted Answer

尽管@am not i am has the correct code，但没有解释为什么你的代码失败了，我认为这就是你所要问的答案。

你的代码存在几个问题：

第一

//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添加到所有现有按钮中，而这些按钮并非由此处理程序生成。

jQuery向父元素添加元素

编辑

JSFiddle