Question

我有这个遍历DOM的递归代码，并为所有输入标记的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);
    }
  }
}

Answer 1

对于整个DOM。

这很简单：

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

您可以更改选择器：$("input") - 选择所有doms输入，选择任何其他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

Answer 2

也没有特别需要使用jQuery。它可以使用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或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对象表示要搜索input标记的DOM树部分的顶部，以及要添加到ID的前缀。如果您执行以下操作：set_inputs(document.body, "test")它将搜索整个文档。如果您执行以下操作：set_inputs(document.getElementById("top"), "test")，它将仅搜索DOM树的一部分（id = top元素下的部分）。您可以将任意DOM对象传递给它，它只会搜索该层次结构中的节点。

Answer 3

只想提出一个小改动

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

Answer 4

要拉深嵌套输入，请使用jquery find（）。这个解决方案比递归javascript简单得多。我确实省略了验证是否存在应该为生产代码完成的id和name属性的步骤。

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

如何使用jQuery更改深层嵌套元素的id

4 个答案: