遞歸掃描DOM元素 - 使用Javascript

我有以下的HTML -遞歸掃描DOM元素 - 使用Javascript

<a> 
    <b> 
    .... 

    ..... 
    <input type="button" name="add" onclick="..." value="add another"/> 
    </d> 
    </b> 
.... 
</a>

我用的是下面的js snippets-

/** 
* Dynamically add a remove button on next to the add button. 
* 
*/ 
addRemoveButton = function(node) { 
    if(node.nodeType == 3) { 
     if(node.nodeName == "input") { 
      if(node.getAttribute("type") == "button") { 
       if(node.getAttribute("name") == "add") { 
        var removeButton = node.cloneNode(true); 
        removeButton.removeAttribute("name"); 
        removeButton.setAttribute("value", "remove"); 
        removeButton.setAttribute("onclick", ""); 
        removeButton.setAttribute("id", ""); 
        (node.parentNode).appendChild(removeButton); 
        return; 
       } 
      } 
     } 
    } 
    if(node.nodeType == 1) { 
     var list = node.childNodes; 
     var i = 0; 
     while(i<list.length) { 
      return addRemoveButton(list[i]); 
      i++; 
     } 
    } 
    return; 
}

現在我想補充型按鈕的輸入，（刪除按鈕），在上面列表中顯示的當前按鈕旁邊。我試圖遞歸地做到這一點。但是這不起作用。你能在上面的代碼中找到問題嗎？

來源

2012-01-13 Acn

據我所知，你的代碼是非常遙遠的。您正在使用錯誤的nodeType，並且在nodeName上有錯誤的情況，並且沒有理由嵌套if語句。但是，你可以把它遞歸的工作是這樣的：

addRemoveButton = function(node) { 
    if (node.nodeType == 1) { 
     if (node.nodeName.toLowerCase() == "input" && 
      node.getAttribute("type") == "button" && 
      node.getAttribute("name") == "add") { 
      var removeButton = node.cloneNode(true); 
      removeButton.removeAttribute("name"); 
      removeButton.setAttribute("value", "remove"); 
      removeButton.setAttribute("onclick", ""); 
      removeButton.setAttribute("id", ""); 
      (node.parentNode).appendChild(removeButton); 
      return; 
     } else { 
      var list = node.childNodes; 
      for (var i=0; i < list.length; i++) { 
       // be aware of childNodes changing on us live here 
       // when we modify the DOM 
       addRemoveButton(list[i]); 
      } 
     } 
    } 
} 

addRemoveButton(document.body);

你可以看到它在這裏工作：http://jsfiddle.net/jfriend00/WCj4b/

使用jQuery（你還標有自己的問題），並繼續使用克隆操作，可以這樣做：

$("input[type='button'][name='add']").each(function(index, el) { 
    $(this).clone(false) 
     .val("remove") 
     .removeAttr("name") 
     .attr("onclick", "") 
     .attr("id", "") 
     .insertAfter(this); 
});

演示在這裏：http://jsfiddle.net/jfriend00/JKsZC/

或者剛插入新的HTML，而THA一個非常非常簡單的版本ñ克隆現有的按鈕：

$("input[type='button'][name='add']").after('<input type="button" value="Remove" />');

演示在這裏：http://jsfiddle.net/jfriend00/vSZwp/

來源

2012-01-13 07:54:16 jfriend00

顯示OP做錯了什麼是好的，但像jQuery這樣的庫，你不需要編寫那種代碼 – 2012-01-13 08:10:04

感謝所有的幫助。 – Acn 2012-01-13 08:10:46

@JuanMendes - 我同意。這就是爲什麼我也寫了一個jQuery版本。 – jfriend00 2012-01-13 08:12:27

爲什麼要遞歸？只需找到現有的按鈕？讓jQuery擔心找到它

$('input[type=button]').after("<input type='button' value='Remove' />");

調整這個來讓你的刪除按鈕來做你需要的。

來源

2012-01-13 07:51:59

的OP代碼試圖創建沿邊現有的一個新的按鈕。你的代碼只是改變現有的按鈕。 – jfriend00 2012-01-13 07:55:43

@ jfriend00不，它不是。 http://jsfiddle.net/hhHGW/ – 2012-01-13 08:00:31

OP的代碼不會接近正常工作，但cloneNode正在嘗試創建一個重複按鈕，然後使該重複按鈕成爲「刪除」按鈕。我做了一個在我的答案中有效的OP代碼版本。 – jfriend00 2012-01-13 08:03:56

遞歸掃描DOM元素 - 使用Javascript

回答

相關問題