如何使用jQuery更改深度嵌套元素的ID

我有這個遍歷DOM的遞歸代碼，併爲所有輸入標記的id添加了一個前綴。如何使用jQuery更改深度嵌套元素的ID

我想改變這一個更優雅的jQuery，但我不知道如何組織的選擇，或者如果選擇需要遞歸..

歡呼聲，

function set_inputs(obj, prefix){ 
    for (var s=0;s< obj.childNodes.length; s++){ 
    var node = obj.childNodes[s]; 
    if(node.tagName == "INPUT"){ 
     node.id= prefix +'_' + node.id; 
     node.name= prefix +'_' + node.name; 
    } 
    else{ 
     set_inputs(node,prefix); 
    } 
    } 
}

來源

2012-03-13 garyM

你說過遍歷dom，你的'set_inputs'函數中有什麼'obj'？ – gideon 2012-03-13 04:34:11

obj是一個DOM對象。該代碼通過再次調用該函數遞歸地抓取obj的childNodes並進行演練，這會抓取childNodes直到找到輸入標記。一旦找到，它會改變ID。 – garyM 2012-03-13 04:54:53

好吧只是想確保:) – gideon 2012-03-13 05:00:03

拉深嵌套的輸入，使用jQuery find（）方法。這個解決方案比遞歸JavaScript更簡單。我沒有做出驗證生產代碼應該完成的id和name屬性存在的步驟。

$(obj).find("input").each(function(){ 
    $(this).attr('id',prefix + "_" + $(this).attr('id')); 
    $(this).attr('name',prefix + "_" + $(this).attr('name')); 
    });

來源

2012-03-13 18:43:10 garyM

對於整個DOM。

這將是簡單：

var prefix; 
$("input").each(function(i,elem) 
{ 
$(elem).attr("id", prefix + "_" + $(elem).attr("id")); 
});

你可以改變的選擇：$("input") - 將選擇所有延遲性肌肉痠痛的投入，任何其他selector針對不同的元素。

如果你在一個函數分別想讓它再：

function() set_inputs(col, prefix) { 
col.each(function(i,elem) 
{ 
    $(elem).attr("id", prefix + "_" + $(elem).attr("id")); 
}); 
}

你會再使用這樣的：

set_inputs($("input"), "abc");//prefix ALL the DOM's inputs with abc 
set_inputs($("input.btn"), "abc");//prefix inputs with the css-class btn

來源

2012-03-13 04:33:36 gideon

沒有特別需要使用jQuery這兩種。它可以在普通的JavaScript來完成，而不使用getElementsByTagName()這樣的遞歸：

function set_inputs(obj, prefix) { 
    var nodes = obj.getElementsByTagName("input"); 
    for (var i = 0, len = nodes.length; i < len; i++) { 
     if (nodes[i].id) { 
      nodes[i].id = prefix + '_' + nodes[i].id; 
     } 
     if (nodes[i].name) { 
      nodes[i].name = prefix + '_' + nodes[i].name; 
     } 
    } 
}

附：我在代碼中添加了保護措施，以防您的代碼在沒有id或name屬性的情況下存在輸入標記，因此如果代碼遇到問題，則不會出錯。如果你不想這樣的保護，代碼會是這樣短：

function set_inputs(obj, prefix) { 
    var nodes = obj.getElementsByTagName("input"); 
    for (var i = 0, len = nodes.length; i < len; i++) { 
     nodes[i].id = prefix + '_' + nodes[i].id; 
     nodes[i].name = prefix + '_' + nodes[i].name; 
    } 
}

您可以通過它傳遞兩個參數，它表示你想要的DOM樹部分的頂部的DOM對象調用這個函數搜索input標籤以及要添加到ID中的前綴。如果你這樣做：set_inputs(document.body, "test")它會搜索整個文檔。如果你這樣做：set_inputs(document.getElementById("top"), "test")，它只會搜索DOM樹的一部分（id = top元素下的部分）。您可以將它傳遞給任何任意的DOM對象，它只會搜索該層次中的節點。

來源

2012-03-13 04:40:56 jfriend00

嗯firefox說getElementsByTagName不是一個函數 – garyM 2012-03-13 05:06:22

它看起來像getElementsByTagName（）只適用於文檔 – garyM 2012-03-13 05:08:39

@garyM - 你一定錯誤的東西，因爲element.getElementsByTagName（）已經在Firefox從第1天開始。你可以閱讀關於它[這裏在MDN上]（https://developer.mozilla.org/en/DOM/element.getElementsByTagName）或在Firefox中查看[測試應用程序工作]（http://jsfiddle.net/jfriend00/2ccvu/）。 – jfriend00 2012-03-13 05:13:42

只是想提出一個小的變化

$('input').each(function(){ 
    this.id = prefix + this.id; 
});

來源

2012-03-13 04:43:43 xyz

如何使用jQuery更改深度嵌套元素的ID

回答

相關問題