jquery를 사용하여 Repeater에서 행 값을 가져 오거나 액세스하는 방법은 무엇입니까?

Question

내 textbox onchange 이벤트에 jquery 함수가 있습니다. 트리거 때, 나는 리피터에 의해 표시되는 데이터 테이블의 값으로 텍스트 상자에 사용자가 입력 한 값의 유효성을 검사하려고합니다. 난 텍스트 상자의 가치를 얻을 수 있지만 내 문제는 내가 리피터 (QTY 열) 값을 얻을 수 없습니다. 나는 행의 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를 트리거 할 때, 나는 txtbox가 변경된 qty-avail의 가치를 원합니다.

업데이트합니다 JQuery와 기능 :

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

HTML : 선택하려는 된 div의

<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

당신은 인덱스 항목을 찾을 수 JQuery와 함께 비슷한을 nth-of-type을 사용할 수 있습니다 : 예를 들어

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

:

여기

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

이 문서에 대한 링크입니다

<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 : 재전송 I 클래스 .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/

Answer 2

는 ID의이 불량> 성격을 가지고 그들.

id="ucprodres-in-stock0>" 

여기에있는 것은 순수한 JavaScript입니다. jQuery 사용법은 없습니다.