Question

所以我正在克隆这个div并让所有的孩子都进去。但它内部是一个列表，在列表中是输入。 div的孩子们就像李的孩子一样。有没有办法深入挖掘并获得李的孩子，同时仍然克隆整个div。表单的其余部分是ul，所以我需要克隆它作为一个整体来保持格式。 div im cloning是我制作的模板。

div：

<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);
}

我无法保证以上内容会解析，因为我目前不在我的开发机器上，但你应该明白我的意思。

得到孩子的孩子

2 个答案: