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。我想要一个新的 UL 添加到该按钮的父 LI，然后能够将新的 LI 元素添加到新创建的 UL。我希望这是有道理的！

所以基本上，单击按钮，将具有“newul”类的新 UL 添加到您当前所在的 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 想要达到的效果。

期望结果示例

4

5 回答 5

13

即使@am not i 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

于 2012-06-28T16:58:26.293 回答
1

我在这里看到的一个问题是，创建的新按钮不会绑定 click 事件。我通过使用on并将事件设置为委托来解决此问题。在这样做时，我给出了 的外部ulan 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>"));
});​
于 2012-06-28T16:39:29.740 回答
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 和按钮值调整按钮。

​</p>

于 2012-06-28T17:19:32.113 回答
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 ) );

});
于 2012-06-28T16:27:26.967 回答
0

这里的问题是您使用的是.add()而不是.after( )。

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

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

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

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

例子。

于 2012-06-28T16:33:07.790 回答