javascript - Fieldset 的动态命名

Question

我正在尝试获取一个表单来动态添加更多具有动态生成的 ID 的输入字段。除了字段集 ID 使用最后一个输入字段的名称而不是原始字段集(如果您检查字段集的 ID，它说的是“fenceType2”而不是“fenceDescription2”)，我大部分都在工作。如果有人能解释我哪里出错了，将不胜感激!非常感谢!这是代码的 fiddle - http://jsfiddle.net/gv0029/dyJjA/ - 这是代码:HTML:

<div id="inputFence1" class="clonedInputFence">
    <fieldset id="fenceDescripton">
        <legend><strong>Fence Description</strong>

        </legend>Fence Description:
        <select name="fenceHeight" id="fenceHeight">
            <option value="select">Select Fence Height</option>
            <option value="6" id="fH6">6 Ft.</option>
        </select>
        <select name="fenceType" id="fenceType">
            <option value="select">Select Fence Type</option>
            <option value="wr1" id="wr1">WRC #1</option>
        </select>
    </fieldset>
</div>
<input type="button" id="btnAddFence" value="Add Another Fence" />
<input type="button" id="btnDelFence" value="Remove Fence" />

JS:

//Dynamic Fence Input Fields
$('#btnAddFence').click(function () {
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
    var newNum = new Number(num + 1); // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);

    //Fence Description 
    newElem.children($("select[name=fenceHeight] option:selected")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
    newElem.children($("select[name=fenceType] option:selected")).attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);
    $('#inputFence' + num).after(newElem);

    // enable the "remove" button
    //$('#btnDel').attr('disabled','');
    $('#btnDelFence').removeAttr('disabled');

    // business rule: you can only add 5 names
    //if (newNum == 5)
    //$('#btnAdd').attr('disabled','disabled');
});

$('#btnDelFence').click(function () {
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
    $('#inputFence' + num).remove(); // remove the last element

    // enable the "add" button
    //$('#btnAdd').attr('disabled','');
    $('#btnAddFence').removeAttr('disabled');

    // if only one element remains, disable the "remove" button
    if (num - 1 == 1) $('#btnDelFence').attr('disabled', 'disabled');
});

$('#btnDelFence').attr('disabled', 'disabled');

感谢任何帮助!再次感谢!

Answer 1

来自 .children()

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

由于您提供了 $(...) 而不仅仅是一个选择器字符串，children 似乎选择了克隆的 div 的直接子级，即 字段集。

所以，你应该做两个改变

• 使用.find()而不是 children
• 使用选择器字符串

newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
newElem.find("select[name=fenceType]").attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);

参见修改后的 JSFiddle