Question

在表单中我有一个允许用户构建搜索查询的部分。在选项中，用户可以选择不同的运算符（包含，不包含，等等）。

当用户在我之间选择时，在下拉菜单之后插入一个新的输入字段，该字段将服务器作为来自字段的字段，请参阅图像： enter image description here

我遇到的问题是我如何测试该领域的存在。目前我正在根据对象的值来做这件事。如果字段最初未设置为介于两者之间，则此方法不起作用。 I.E如果它是on contains并且我选择就像字段被删除。

我想我需要计算当前div中文本输入字段的数量，然后如果数字大于2则删除一个否则不执行任何操作。

我被卡住的地方是能够计算当前div的输入元素

我试过了：

var cnt = $(this, 'div .operClass input:text').length;

但这会计算表单中当前行的所有输入。

当选择一个选项来计算并返回选择器所在的当前div的输入字段数时，是否可以指示我正确的方向？

提前致谢，

jscript

$(document).ready(function () {
            $('#add').click(function () {
                InsertFields();
            });
            //insert first row
            function InsertFields() {
                $("<div class='additionalrow'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select name='operator'class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
            }
            //add additional row 
            //used second funciton to reset bindings
            $('#newAdd').live('click', function () {
                $("<div class='additionalrow'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select id='newOperator' name='operator' class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
            });
            //remove row
            $('#btnRemove').live('click', function () {
                $(this).parent().remove();
            });

            $('.operClass').change(function () {
                var foo = $('.operClass option:selected').val();
                alert(foo); 
            });

            $('select').live('change', '.operClass', function () {
                var sb = $(this, '.operClass option:selected').val();
                var ci = $(this, '.operClass');
                insertFromField(sb, ci);
            });
            //insert field after between option or remove it if it exists
            function insertFromField(param1, param2, param3) {

                if (param1 == "BETWEEN") {
                    $("<input type='text' name='fieldValue1' id='fieldvalue1' value='' size='20' />").insertAfter(param2);    
                }
                else {
                //need to test count of existing input fields for the current row here if n > 1 remove the second field else do nothing.
                    $(param2).next().remove();
                }
            }
        });

HTML

<div id="queryFields">
            <select name="condition">
                <option value="AND">AND</option>
                <option value="OR">OR</option>
            </select>
            <input type="text" name="fieldname" id="fieldName" size="20" />
            <select  name="operator">
                <option id="opt1" value="CONTAINS">Contains</option>
                <option id="opt2" value="DOES NOT CONTAIN">Does Not Contain</option>
                <option id="opt3" value="LIKE">Like</option>
                <option id="opt4" value="BETWEEN">Between</option>
            </select>
            <input type="text" name="fieldValue1" id="fieldvalue1" value="" size="20" />
            <input type="button" id="add" value="Add" /> 
        </div>

Answer 1

你可以这样做

var $selector = $(this); /* Assuming the selector is `this` */
var count = $selector.siblings("input:text").length;

不需要额外的课程。

如果您只想在选择后匹配文本输入，则可以使用：

$selector.nextAll("input:text").length;

这与每次选择前的第一个文本输入不匹配。

Answer 2

根据行号在输入字段中添加一个类，然后使用

基本上在这里添加一个类号，并为每个新行增加它。

<div id="queryFields" class="row-1">
<select name="condition">
<option value="AND">AND</option>
<option value="OR">OR</option>
</select>
<input type="text" class="classname" name="fieldname" id="fieldName" size="20" />
<select  name="operator">
<option id="opt1" value="CONTAINS">Contains</option>
<option id="opt2" value="DOES NOT CONTAIN">Does Not Contain</option>
<option id="opt3" value="LIKE">Like</option>
<option id="opt4" value="BETWEEN">Between</option>
</select>
<input type="text" class="classname" name="fieldValue1" id="fieldvalue1" value="" size="20" />
<input type="button" id="add" value="Add" /> 
</div>

的jQuery

var cnt = $('div .operClass .row-1 input.classname').length;

这将在这一行中给你2个数。

如何获取动态生成的DOM对象中的元素数

2 个答案: