jquery - 如何使用 jquery 从 Repeater 获取/访问行值？

Question

我有一个用于文本框 onchange 事件的 jquery 函数。当触发时，我想用中继器显示的数据表中的值验证用户在文本框中输入的值。我能够获取文本框的值，但我的问题是我无法从中继器获取值(数量列)。我为行的 id 设置了 itemindex，以识别正确的行并获取列 qty 的值。在 Debug模式下，我使用的变量是未知的，所以我根本没有得到任何值。我需要帮助，我已经为此苦苦挣扎太久了。

html

<asp:Repeater ID="rptInStock" runat="server">
            <ItemTemplate>
                <div id="ucprodres-in-stock<%# Container.ItemIndex%>>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%>
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="ucprodres-stock availability">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Availability").ToString%>
                    </div>
                    <div class="ucprodres-stock unit-price">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRange").ToString%>
                    </div>
                    <div class="ucprodres-stock dollar">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRangePrice").ToString%>
                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">
                        <asp:TextBox ID="tbxInStock" runat="server"></asp:TextBox>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

jquery:(+itemIndex 也不起作用，因为我使用了container.itemIndex 来使我的id 唯一，所以如何向id 添加索引？)

function ValidateQty1(txtBox) {
    var qtyreqd = txtBox.value;
    var instockrow = document.getElementById("ucprodres-in-stock" + itemIndex);
    var qtyavail = instockrow.childNodes[1].nodeValue;
    if (qtyreqd > qtyavail) {
        alert("The required quantity should not be greater than the available quantity");
}

生成的 html 示例

<div id="ucprodres-in-stock">

                <div id="ucprodres-in-stock0>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        FAIRCHILD SEMICONDUCTOR C
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        2
                    </div>
                    <div class="ucprodres-stock availability">
                        In Stock
                    </div>
                    <div class="ucprodres-stock unit-price">

                    </div>
                    <div class="ucprodres-stock dollar">

                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">

                        <input name="MasterBasic$MasterPageContent$ucProductHeader$ucProductResults$rptInStock$ctl00$tbxInStock" type="text" id="MasterPageContent_ucProductHeader_ucProductResults_rptInStock_tbxInStock_0" onchange="ValidateQty1(this);" onkeypress="return validate(event);" />
                    </div>
                </div>

                <div id="ucprodres-in-stock1>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        Fairchild Semiconductor Corp
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        6
                    </div>
                    <div class="ucprodres-stock availability">
                        In Stock
                    </div>
                    <div class="ucprodres-stock unit-price">

                    </div>
                    <div class="ucprodres-stock dollar">

                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">

                        <input name="MasterBasic$MasterPageContent$ucProductHeader$ucProductResults$rptInStock$ctl01$tbxInStock" type="text" id="MasterPageContent_ucProductHeader_ucProductResults_rptInStock_tbxInStock_1" onchange="ValidateQty1(this);" onkeypress="return validate(event);" />
                    </div>
                </div>

下面是一个示例输出，可以更好地理解我的场景:当 onchange 触发时，我想获取 qty-avail 中 txtbox 发生更改的值。

更新: Jquery函数:

function ValidateQty1(txtBox) {
    var qtyreqd = txtBox.value;
    var qtyavail = $(this).parent().siblings(".qty-avail").text().trim();
    alert(qtyavail);
}

HTML:

<asp:Repeater ID="rptInStock" runat="server">
            <ItemTemplate>
                <div id="ucprodres-in-stock<%# Container.ItemIndex%>" class="ucprodres-in-stock">
                    <div class="ucprodres-stock manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%>
                    </div>
                    <div id="instock-qtyavail" class="ucprodres-stock qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="ucprodres-stock availability">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Availability").ToString%>
                    </div>
                    <div class="ucprodres-stock unit-price">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRange").ToString%>
                    </div>
                    <div class="ucprodres-stock dollar">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("QtyRangePrice").ToString%>
                    </div>
                    <div class="ucprodres-stock qty-required instock-qtyreqd">
                        <input type="text" onkeypress="return validate(event);" onchange="ValidateQty1(this);"  />
                        <%--<asp:TextBox ID="tbxInStock" runat="server"></asp:TextBox>--%>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

Answer 1

您尝试选择的 div 的 id 中有一个 rogue > 字符。

id="ucprodres-in-stock0>"

此外，您这里拥有的是纯 JavaScript。没有 jQuery 的使用。