使用js依次添加div id和for属性

Question

我想为每个input和label元素动态添加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

这非常简单。只需使用每个元素的index参数迭代每个.tab，并修改元素的属性。

$('.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'));