使用 JavaScript/jQuery 动态添加兄弟元素和子元素

Question

我想要一个让用户能够动态添加字段的表单。 我需要的是添加动态子项并让每个子项都能够添加其 N 个子项的能力。 很像这样

Parent 1
  -- Child 1-1
  -- Child 1-2
       -- Child 1-2-1
       -- Child 1-2-2
       -- Child 1-2-3
       -- Child 1-2-4
            -- Child 1-2-4-1
            -- Child 1-2-4-2
  -- Child 1-3
  -- Child 1-4
  -- Child 1-5
     -- Child 1-5-1
Parent 2
Parent 3
  -- Child 3-1    

一切都是动态的，用户可以随意深入。 到目前为止，我能够实现类似于 JsFiddle 链接的东西，并且在深入 2 个级别后我被卡住了。 PS：添加数字是为了显示孩子与其兄弟姐妹、父母和孩子之间的关系。 更新 1：这是我迄今为止能够实现的目标： JsFiddle

更新 2：在这方面做了一些更多的工作，并且能够做到这一点： jsFiddle

Answer 1

我不会在 html 中使用 onclick 属性，而是使用 javascrip 添加事件处理程序

如果您的子节点都使用相同的代码，您可以尝试使用递归方法：

function spawn(event) {
    $(this).append(child);
    $(child).on('click', function(event) {spawn(event);});
}


$('.parent').on('click', function(event) {spawn(event);});

是第一个想法（使用 jquery），也许它会激发您的灵感。

ps 缺少代表来发表此评论，所以它是一个答案 >.>

Answer 2

根据 user3154108 的回答，这是一个递归解决方案，您可以从：

$('.parent').on('click', spawn);
function spawn(){
    var x = $('<input class="' + this.className + '-child"  type="button" value="Add Navigation" />');
    x.on('click', spawn);
    x.insertAfter(this);
}

http://jsfiddle.net/Z9SBa/23/

Answer 3

正如所讨论的，我已经在小提琴上解决了这个问题。

请使用wrapElement()函数将您的元素包装在您想要的 div 中。 如果您丢失了小提琴，这是代码

$('.level_1').on('click', spawn);
function spawn(){
    // check level
    var level = stripLevel(this.className);
    if (level !== '') {
        var countOthers = this.parentNode.querySelectorAll("[class^='level_" + level +"']").length;
        var x = wrapElement(level, countOthers);
        if (level.length == 1) {
            $('#addedElements').append(x);
        } else {
            //x.insertAfter(this);
            $(this).parent().append(x);
        }
    }
}

// strip level
var stripLevel = function(className) {
    var index = className.indexOf('_');
    if(index > -1) {
        return className.substr(index + 1);
    } else {
        return '';
    }
}

// wrapper element
var wrapElement = function(level, number) {
    var div = $('<div></div>');
    if (level.length == 1) {
        // it's parent
        var input = $('<input type="text" name="foo_" />');
        div.append(input);
    } else {
        // it's child
        var span = $('<span>child level ' + level + '-' + number + '</span>');
        div.append(span);
    }
    // add button
    var button = $('<input class="level_' + level + '-' + number + '"  type="button" value="Add Navigation" />');
    button.on('click', spawn);
    div.append(button);
    div.css('margin-left', (level.length * 10) + 'px');
    return div;
}