使用 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;
}