2012-03-13 25 views
0

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); 
    } 
    } 
} 
+0

あなたは 'set_inputs'関数で' obj'とは何ですか? – gideon

+0

objはDOMオブジェクトです。このコードはobjのchildNodesを取得し、関数を再度呼び出すことで再帰的にドリルインします。これにより、inputNodeが見つかるまでchildNodesを取得します。一度検出されると、IDを変更します。 – garyM

+0

大丈夫でしたか? – gideon

答えて

0

を提案したいです。このソリューションは、再帰的なjavascriptよりはるかに簡単なコードです。私は、生産コードのために行うべきid属性とname属性の存在を確認するステップを省いた。

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

DOM全体。

のように簡単になります:$("input") - 異なる要素をターゲットにする任意の他のselectorに、すべてのDOMSの入力を選択:あなたは、セレクタを変えることができる

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

あなたは、関数で別々にそれを望んでいた場合:

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

をあなたは、このようにそれを使用します。このどちらかのためのjQueryを使用する

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

特になし必要。これは、このようなgetElementsByTagName()を使用して再帰せずに、プレーンJavaScriptで行うことができる:

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

P.S.入力タグがIDまたは名前属性なしで存在する場合に備えてコードにないコードに保護を追加したので、コードに遭遇した場合にコードがエラーになることはありません。あなたはそれを二つの引数、あなたがしたいDOMツリーの一部のトップを表しDOMオブジェクトを渡すことで、この関数を呼び出し

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

:あなたがその保護を希望しなかった場合、コードは次のように短くなりますIDに追加する接頭辞とinputタグを検索します。このようなことをすれば、set_inputs(document.body, "test")はドキュメント全体を検索します。このような場合:set_inputs(document.getElementById("top"), "test")、DOMツリーの一部(id = top要素の下の部分)のみを検索します。任意のDOMオブジェクトに渡すことができ、その階層内のノードのみを検索します。

+0

Hmmm firefoxは、getElementsByTagNameは関数ではないと言っています – garyM

+0

getElementsByTagName()はドキュメントのためだけに機能します – garyM

+0

@garyM - element.getElementsByTagName()はFirefoxの1日目にあったので、何かミスタイプする必要があります。 MDN](https://developer.mozilla.org/en/DOM/element.getElementsByTagName)またはFirefoxの[テストアプリの作業](http://jsfiddle.net/jfriend00/2ccvu/)を参照してください。 – jfriend00

0

はジャスト)(、使用jqueryの検索を深くネストされた入力を引くために小さな変更

$('input').each(function(){ 
    this.id = prefix + this.id; 
}); 
関連する問題