Question

我在jsp中克隆了以下div：

    <div id="row" class="">
        <div class="form-group">
            <div class="control-label">
                <label for="name"><b> Select Name: </b></label>
            </div>
            <div class="control-label">
                <select class="form-control" name="names" id="names">
                    <option value="" disabled="disabled" label="Select a name"></option>                                                                                                    
                        <option value="1">Bradley</option>   
                        <option value="2">Anderson</option>
                        <option value="3">Sonya</option>    
                </select>
            </div>          
            <div class="control-label">
                <label for="ranks"><b> Rank :  </b></label>
                <input type="text" value="1" name="rank" id="rank" readonly="">
            </div>
        </div>
    </div>

我正在javascript中执行克隆：

var i = 0;
function duplicate() {
  var original = document.getElementById('row');
  var clone = original.cloneNode(true);
  clone.id = "row" + ++i;
  if(!document.getElementById('row3')){
      original.parentNode.insertBefore(clone, document.getElementById('nextDiv')); //nextDiv not shown in jsp for simplification
  } 
}

如何访问“rank”的值，以便每次克隆div时，值会递增1？

基本上我想要像clone.getElementById（'rank'）这样的东西虽然我知道这不是正确的语法。我尝试了clone.setAttribute（'rank'，i ++）但是setAttribute只访问div的属性而不是div中的子节点。有更简单的方法吗？

Answer 1

尝试使用Array.prototype.forEach()，for循环，Element.children来增加克隆元素id的{{1}}，for，value属性元素子节点。请注意，.control-label元素的for属性应与label，id元素的select对应;在input，"s" for="names"元素

添加了for="ranks"

label

var i = 0;

function duplicate() {
  var original = document.getElementById('row');
  var clone = original.cloneNode(true);
  clone.id = "row" + ++i;
  Array.prototype.forEach.call(clone.querySelectorAll(".control-label")
  , function(el, index) {
    for (var j = 0; j < el.children.length; j++) {
      // increment `id` 
      if (el.children[j].id !== "") {
        el.children[j].id = el.children[j].id + i;
      }
      // increment `for` attribute
      if (el.children[j].htmlFor !== "") {
        el.children[j].htmlFor = el.children[j].htmlFor + i;
      } 
      // increment `#ranks`-n `value`         
      if (el.children[j].name === "ranks") {
        el.children[j].value = 1 + Number(el.children[j].value)
      }
    }
  })

  if (!document.getElementById('row3')) {
    original.parentNode.insertBefore(clone, 
    // nextDiv not shown in jsp for simplification
    document.getElementById('nextDiv')); 
  }
}

duplicate()

在克隆的div中操纵子节点属性的值？

1 个答案: