0

所以我正在克隆这个 div 并让所有的孩子都在里面。但它里面是一个列表，列表中是输入。divs 的孩子作为 li 的出现。有没有办法更深入地挖掘并获得 li 的孩子，同时仍然克隆整个 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>
4

2 回答 2

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]);
}
于 2013-08-28T13:00:45.037 回答
0

您是否考虑过使用递归？例如，在您的代码中，我猜这是您希望在所有子节点上执行的位：

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

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

于 2013-08-28T13:10:44.923 回答