如何使用 jquery 从中继器获取/访问行值？

Question

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

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 也不起作用，我如何向 id 添加索引，因为我使用 container.itemIndex 使我的 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 中包含流氓 > 字符。

id="ucprodres-in-stock0>"

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

Answer 2

您可以使用 nth-of-type 和 JQuery 来按索引查找项目，类似于：

<script>
var foundEl = $( "#ucprodres-in-stock > div:nth-of-type(2)" );
</script>

这里是文档的链接：

http://api.jquery.com/nth-of-type-selector/

例如：

<form>
<fieldset>
     <section id="demo">
            <!-- some code-->
     </section>
     <section id="test">
            <!-- some code-->
     </section>
     <section id="hello">
            <!-- some code-->
     </section>
  </fieldset>
 </form>

这将在控制台中打印“测试”：

var el =$("form>fieldset>section:nth-child(2)");
console.log(el.attr("id"));

更新 1：

根据您重新发送的更新，我会这样做，我会搜索具有 .qty-avail 类的父兄弟姐妹，例如：

$("input").on('change',function(){
    var t = $(this).parent().siblings(".qty-avail").text().trim();
    alert(t);
});

http://jsfiddle.net/X5Q4H/1 或者 就像在您的代码示例中一样：

http://jsfiddle.net/X5Q4H/2/