Question

我正在使用带有以下标记的MVC3剃刀：

<div class="budget">
<!--line item-->
<div class="budget-row">
    <div class="row">
        <div class="twelve columns">
            <div class="row">
                <div class="two mobile-one columns">
                <label class="right inline">Item:</label>
                </div>
                <div class="ten mobile-three columns">
                @Html.TextBox("description[]", "", new { @class = "expand" })
                </div>
            </div>
            <div class="row">
                <div class="two mobile-one columns">
                <label class="right inline">Cost:</label>
                </div>
                <div class="two mobile-one columns field-left">
                @Html.TextBox("amount[]", "0", new { @class = "expand" })
                </div>
                <div class="one mobile-one columns">
                <label class="right inline">Markup:</label>
                </div>
                <div class="one mobile-one columns field-left">
                @Html.TextBox("markup_amount[]", "0", new { @class = "expand" })
                </div>
                <div class="one mobile-one columns field-left">
                <select id="markup_type[]" style="display:none;">
                <option value="P" SELECTED>%</option>
                <option value="D">$</option>
                </select>
                </div>
            </div>
        </div>
    </div><!--row-->    
</div>
<!--end line item-->

    <a class="button radius small success middle" href="#" id="submit">Submit</a>
</div>

“预算”div是整体div，“预算行”div可以是一行或多行。我正在寻找迭代捕获每个输入的值。我试过这个：

$("#submit").click(function() {
    $(".budget input[type=text]").each(function() {
        alert(this.value);
    });
    return false;
});

坦率地说，尝试了很多东西，在这一点上可能还不是很接近。而且这只会返回我的文本框。

由于

编辑这是添加输出代码：

<div class="budget">
<!--line item-->
<div class="budget-row">
    <div class="row">
        <div class="twelve columns">
            <div class="row">
                <div class="two mobile-one columns">
                    <label class="right inline">Item:</label>
                </div>
                <div class="ten mobile-three columns">
                    <input class="expand" id="description__" name="description[]" type="text" value="" />
                </div>
            </div>
            <div class="row">
                <div class="two mobile-one columns">
                    <label class="right inline">Cost:</label>
                </div>
                <div class="two mobile-one columns field-left">
                    <input class="expand" id="amount__" name="amount[]" type="text" value="0" />
                </div>
                <div class="one mobile-one columns">
                    <label class="right inline">Markup:</label>
                </div>
                <div class="one mobile-one columns field-left">
                    <input class="expand" id="markup_amount__" name="markup_amount[]" type="text" value="0" />
                </div>
                <div class="one mobile-one columns field-left">
                    <select id="markup_type[]" style="display:none;">
                        <option value="P" SELECTED>%</option>
                        <option value="D">$</option>
                    </select>
                </div>
            </div>
        </div>
    </div><!--row-->    
</div>
<!--end line item-->

<a class="button radius small success middle" href="#" id="submit">Submit</a>
</div>

Answer 1

这是我想出的用于获取所选值的内容。不确定这是否是你需要的，或者是否还有更多。

<div class="row">
    <div class="two mobile-one columns">
        <label class="right inline">Cost:</label>
    </div>
    <div class="two mobile-one columns field-left">
        <input type="text" value="1" class="first" />
    </div>
    <div class="one mobile-one columns">
        <label class="right inline">Markup:</label>
    </div>
    <div class="one mobile-one columns field-left">
        <input type="text" value="2" class="second" />
    </div>
    <div class="one mobile-one columns field-left">
        <select id="markup_type[]" class="first">
            <option value="A" SELECTED>%</option>
            <option value="B">$</option>
        </select>
    </div>
    <div class="one mobile-one columns field-left">
        <select id="test_type[]" class="second">
            <option value="Z" SELECTED>%</option>
            <option value="Y">$</option>
        </select>
    </div>
</div>

$(document).ready(function () {
    $("#submit").click(function () {
        $("select :selected").each(function(){
            alert($(this).val());
            //get the corresponding input for this select
            var cName = $(this).parent().attr("class");
            var div = $(this).closest(".row");
            var input = $("." + cName, div);
            alert($(input).val());
        });
        return false;
    });
});

您可以查看fiddle here。

请注意，我们正在使用类将select绑定到输入。在这个例子中，我用class =“first”标记了输入，用class =“first”标记了select，将它们绑定在一起。

让我知道这是否适合您。

使用jquery多次迭代不同的输入元素

1 个答案: