使用JavaScript/jQuery動態添加兄弟和子元素

-3

我想要一個讓用戶能夠動態添加字段的表單。我需要的是能夠添加動態的孩子，並賦予每個孩子添加N個孩子的能力。很像這樣使用JavaScript/jQuery動態添加兄弟和子元素

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個級別後我陷入了嚴重的困境。 P.S：這些數字是爲了顯示兒童與其兄弟姐妹，其父母及其子女之間的關係。更新1：這是我已經能夠迄今爲止達到：JsFiddle

更新2：有沒有這方面的一些更多的工作，並能得到這麼遠：jsFiddle

來源

2014-04-02 Basit Saeed

好主意，你到目前爲止嘗試過什麼？如果您對如何做到這一點不知所措，可以使用帶有複選框或下拉菜單的'.append（）'或'.clone'來嘗試jQuery/Javascript，以指示該項目是子項目還是新項目。還有一個「輸入」按鈕，用於運行代碼 –

[http://code.google.com/p/editable-jquery-tree-with-php-codes/](http://code.google.com/p/編輯 - jQuery的樹與php代碼/） –

我能夠實現這一點：http://jsfiddle.net/Z9SBa/18/ –

所討論，我已經在the fiddle上完成了。

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

來源

2014-04-03 13:52:42 KarelG

這完全符合我的要求。非常感謝，@ KarelG！ –

我不會用的onclick在HTML屬性，但隨着的javascrip

如果你的孩子節點都使用相同的代碼，你可以嘗試使用遞歸的方法添加的事件處理程序：

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


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

是第一個想法（有jquery），也許它啓發你。

p.s. 。缺乏代表做出此評論，所以這是一個答案，而不是>>

來源

2014-04-02 12:16:48 user3154108

感謝您的評論。我現在只是使用'onClick（）'來至少讓它工作。我喜歡遞歸函數的想法，我相信我已經使用了相同的方法;相同的功能添加儘可能多的父母和孩子。如果你可以改善我提供鏈接的JsFiddle，我會非常感激。謝謝。 –

基礎上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/

來源

2014-04-03 12:31:28

使用JavaScript/jQuery動態添加兄弟和子元素

回答

相關問題