Question

我想为每个输入和标签元素动态添加id和for属性。

  <div id="splash">
    <div class="tab">
      <input id="tab-1">
      <label for="tab-1"><label>
    </div>

   <div class="tab">
     <input id="tab-2">
     <label for="tab-2"><label>
   </div>

   <div class="tab">
     <input id="tab-3">
     <label for="tab-3"><label>
   </div>
 </div>

所以基本上我希望输入的id是tab-＃，每个输入字段的＃增加1，标签的“for =”属性相同。

Answer 1

这非常容易。只需使用每个.tab参数迭代每个index，然后修改元素的属性。

$('.tab').each(function (index) {
  var tabName = 'tab-' + (index + 1);
  $('input', this).attr('id', tabName);
  $('label', this).attr('for', tabName);
});

Jsbin：http://jsbin.com/rawatag/4/edit?html,js,output

Answer 2

确定。我不会给你一个直接的答案，但这将来会更有用。

基本上制作容器<div id=splash>

然后运行此命令document.getElementById("parentID").innerHTML += "Something here"

这会将内容（请注意。+=符号）添加到div (splash)

然后，使用计数器将其包裹在循环中以获得所需的结果

例如：...innerHTML += "<div id=tab-" + counter + "></div>"

请注意，这可以在原始JS中完成。不需要JQuery。

Answer 3

这里不需要jQuery：

es5（jsfiddle）

function assignInputsAndLabels(root) {
    var children = root.children;
    var tabNumber = 1;

    for (var i = 0; i < children.length; i++) {
        if (children[i].classList.contains('tab')) {
            children[i].getElementsByTagName('input')[0].setAttribute('id', 'tab-' + tabNumber);
            children[i].getElementsByTagName('label')[0].setAttribute('for', 'tab-' + tabNumber);
            tabNumber++;
        }
    }
}

assignInputsAndLabels(document.getElementById('splash'));

ES6

function assignInputsAndLabels(root) {
    const children = root.children;
    let tabNumber = 1;

    for (let i = 0; i < children.length; i++) {
        if (children[i].classList.contains('tab')) {
            children[i].getElementsByTagName('input')[0].setAttribute('id', `tab-${tabNumber}`);
            children[i].getElementsByTagName('label')[0].setAttribute('for', `tab-${tabNumber}`);
            tabNumber++;
        }
    }
}

assignInputsAndLabels(document.getElementById('splash'));

函数的参数是具有tab类的元素的包装器。在您的情况下，您将传入ID为splash的元素的DOM节点。因此，您可以像这样调用函数：

assignInputsAndLabels(document.getElementById('splash'));

Answer 4

我是用javascript完成的。请在下面查看

＆＃13;

function init(){
    
	var sel = document.getElementsByClassName("tab");
	
	var i=1;
	
	for(let obj of sel){
          var attr = "tab-"+i;
          obj.getElementsByTagName('input')[0].setAttribute("id",attr);
          obj.getElementsByTagName('label')[0].setAttribute("for",attr);
	  i++;
	}
   
 }
 
 addEventListener("load",init);

＆＃13;

<div class="tab">
 <input type="text">
 <label></label>
</div>

<div class="tab">
 <input type="text">
 <label></label>
</div>

＆＃13;

使用js顺序添加div id和属性

4 个答案:

es5（jsfiddle）

ES6