获取孩子的孩子

Question

所以我克隆这个孩子，让所有的孩子都在里面。但内部是一个列表，列表中是输入。 divs的孩子像李氏一样出现。有没有一种方法可以深入挖掘并获得李的孩子，同时还可以克隆整个div。表单的其余部分在ul中，所以我需要将它作为一个整体进行克隆以保持格式化。 div im克隆是一个模板。

股利：

<div id="add_contact" style="display:none" > 
    <li> 
    <label class="description" for="element_3"><h2>Contact</h2> </label> 
     <span> 
      <input id="element_3_1" name= "acct_first" onchange="javascript:contacts();" value=" " class="element text" maxlength="255" size="20" value=""/> 
      <label>First</label> 
     </span> 
     <span> 
      <input id="element_3_2" name= "acct_last" onchange="javascript:contacts();" class="element text" maxlength="255" size="20" value=""/> 
      <label>Last</label> 
     </span> 
     </li>  
    <li > 
     <label class="description" for="element_27">Email Address </label> 
     <div> 
      <input id="element_27" name="acct_cont" onchange="javascript:contacts();" class="element text large" type="text" maxlength="200" value=""/> 
     </div> 
     </li> 
     <li> 
     <label class="description" for="element_4">Phone </label> 
     <span> 
      <input id="element_4_1" name="acct_phone" onchange="javascript:contacts();" class="element text" size="20" maxlength="20" value="" type="text"> 
      <label for="element_4_1">Please Include Country Code If Outside The United States</label> 
      <p class="guidelines" id="guide_4_1"><small>Please Include Country Code If Outside The United States</small></p> 
     </span> 
     </li>  
     <li> 
     <label class="description" for="element_13">Fax </label> 
     <span> 
      <input id="element_13_1" name="acct_fax" onchange="javascript:contacts();" class="element text" size="20" maxlength="20" value="" type="text"> 
      <label for="element_13_1"></label> 
     </span> 
     </li> 
     <li> 
     <label class="description" for="element_6">Type Of Contact (Select all that apply) </label> 
      <span> 
      <input type="checkbox" name="contact" value="">Purchasing<br> 
      <!--<p class="guidelines" id="guide_6_1"><small>For Questions</small></p>--> 
      </span> 
      <span> 
      <input type="checkbox" name="contact" value="">Quality Control<br> 
      </span> 
      <span> 
      <input type="checkbox" name="contact" value="">Accounts Payable<br> 
      </span> 
      </br> 
    </li> 
</div> 

和脚本：

<script> 

var counter = 1; 

function moreFields() { 
    counter++; 
    var newFields = document.getElementById('add_contact').cloneNode(true); 

    newFields.id = ''; 
    for (var index = 0; index < newFields.length; index++) { 
     console.log(newField[i]); 
    } 
    newFields.style.display = 'block'; 
    var newField = newFields.children; 



    for (var i=0; i<newField.length;i++) { 
     var theName = newField[i].name 


      newField[i].name = theName + counter; 
      newField[i].value=newField[i].name; 
      newField[i].id=newField[i].name; 




    } 
    var insertHere = document.getElementById('add_contact'); 
    insertHere.parentNode.insertBefore(newFields,insertHere.nextSibling); 

} 


</script> 

Answer 1

这会帮助你：

counter++; 
var newFields = document.getElementById('add_contact').cloneNode(true); 
var newInputs = newFields.getElementsByTagName('input'); 

newFields.id = ''; 
for (var index = 0; index < newInputs.length; index++) { 
    console.log(newInputs[i]); 
} 

Answer 2

你有没有考虑使用递归？例如，在你的代码，我猜这是你想要执行的所有子节点的对位：

var newField = newFields.children; 
for (var i=0; i<newField.length;i++) { 
    var theName = newField[i].name 
     newField[i].name = theName + counter; 
     newField[i].value=newField[i].name; 
     newField[i].id=newField[i].name; 
} 

会经过newFields的孩子......递归函数可能是这样的：

function recursiveBit(element,counter) { 
     var theName = newField[i].name 
     element.name = theName + counter; 
     element.value=newField[i].name; 
     element.id=newField[i].name; 
     var children = element.children; 
     for (var i=0; i<children.length;i++) { 
      recursiveBit(children[i],counter); 
     } 
    } 

这意味着原来的功能可能是这样的：

function moreFields() { 
    counter++; 
    var elementToCopy = document.getElementById('add_contact'); 
    var newFields = elementToCopy.cloneNode(true); 
    newFields.id = ''; 
    for (var index = 0; index < newFields.length; index++) { 
     console.log(newField[i]); 
    } 
    newFields.style.display = 'block'; 
    for (var i=0; i<newField.length;i++) { 
     recursiveBit(newField[i]); 
    } 
    insertHere.parentNode.insertBefore(newFields, elementToCopy.nextSibling); 
} 

我不能保证上述将解析为我不是目前我的开发机器上，但你SH我希望能得到我的意思的要点。