如何获得Formee图例边框以通过编程添加DOM元素进行扩展

Question

因此，我有一个应用程序，用户可以在其中添加不确定数量的成对文本框，以表示要提交到数据库的人的姓名和电话号码。 相关标记如下...

<div id="divAddVoters">
            <form class="formee" action="">
                <fieldset id="appendVoters">
                    <legend>Enter Voter Name and Phone Number:</legend>
                    <!--<div id="appendVoters">-->
                        <div class="grid-4-12" id="appendVoterName">
                            <label>Name:</label>
                            <input type="text" class="txtAddVoter" value="" />
                        </div>
                        <div class="grid-4-12" id="appendVoterNumber">
                            <label>Phone Number</label>
                            <input type="text" class="txtAddNumber" value="" />
                        </div>
                        <div class="grid-4-12"></div>
                    <!--</div>-->
                    <div class="grid-12-12">
                        <button id="btnAddVoter" class="formee-button" 
                                onclick="addVoter(); return false;">ADD VOTER</button>
                        <button id="btnSubmitVoters" class="formee-button" 
                                onclick="submitVoters(); return false;">SUBMIT VOTER(S)</button>
                        <p id="pError"></p>
                    </div>
                </fieldset>
            </form>
        </div>

...因此，如果用户多次选择btnAddVoter按钮，则应将任意数量的txtAddVoter文本框添加到div appendVoterName而将txtAddNumber文本框添加到div appendVoterNumber 。 下面是执行此操作的javascript函数...

function addVoter()
            {
                $('fieldset#appendVoters div#appendVoterName').append("<label>Name</label><input type='text'" +  
                                "class='txtAddVoter' value='' />");

                $('fieldset#appendVoters div#appendVoterNumber').append("<label>Phone Number</label>" +
                                "<input type='text' class='txtAddNumber' value='' />");
            }

我正在使用Formee使一切看起来都很好，这解释了fieldset ， legend和form class="formee" （我的应用程序实际上完全由javascript驱动，因此，除了formee样式需要它以外，我根本不需要任何表单） 。 问题在于，图例标记所绘制的边框不会随着其中添加的元素而增长，因此，当用户添加文本框时，最终它们将超出图例的界限，在按钮上方，并且整个外观看起来完全荒谬。

我想知道使图例边框随着所包含的文本框元素的数量而增长的最佳方法是什么。 我正在考虑维护文本框的数量，当它们使用javascript / jQuery更改Formee样式表以使图例变大时达到一定数量时？ 不过，还不确定如何找到一些好的想法。

编辑-好的，这是CSS的相关部分...

.formee fieldset {
    border: 1px solid #d4d4d4;
    position: relative;
    height:30%;
    padding: 1.2em 0;
    margin: 0 0 4em;
}

我要做的是，每当用户添加一个文本框对时，读出height属性值，将该值加倍，然后在此CSS规则中将此值设置为新的高度。 这可能吗？

编辑-我最终通过此功能实现了它...

    function doubleFieldSetSize(divName)
    {
        var height = $('fieldset#' + divName).css('height');
        height = height.replace(/px$/, '');
        height = parseInt(height) + 70;
        height = height + "px";
        $('fieldset#' + divName).css('height', height);
    }

Answer 1

尝试添加此CSS，浮点数和高度吗？

.formee fieldset {
    float:left;
    height:auto;
    border: 1px solid #d4d4d4;
    position: relative;    
    padding: 1.2em 0;
    margin: 0 0 4em;
}