HTML의 형제 값 선택

Question

jQuery를 사용하여 내 ListView의 형제 값을 선택하는 데 문제가 있습니다. 여기에 내가 시도하고있는 jQuery 구문은 있지만 콘솔에 쓰는 불 덩어리로 디버깅 할 때 모든 것이 정의되지 않았 음을 알지만, html을 볼 때 값을 볼 수 있으므로 선택할 수 없다는 것을 알고있다. Update 버튼의 click 이벤트에서 호출되고 있습니다. 업데이트중인 행에 대한 내 listview에서 고유 한 행의 형제를 가져와야합니다.

 $('.nbr') 
.click(function){ 
      var newaddr = $(this).siblings('#addr').val(); 
      var originaladdr = $(this).siblings('#addr').attr('data-Value'); 
      var newplace = $(this).siblings('#place').val(); 
      var originalplace = $(this).siblings('#place').attr('data-Value'); 

의 ListView :

<asp:ListView runat="server" id="ListView1" > 
     <LayoutTemplate> 
      <table id="tablesorter" style="border:solid 1px black;width:55%;"> 
       <thead> 
        <tr> 
         <th> 
          <a href="#">Addr</a> 
         </th> 
         <th> 
          <a href="#">Place</a> 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id="itemPlaceholder" runat="server" /> 
       </tbody> 
       <tfoot> 
       </tfoot> 
      </table> 
     </LayoutTemplate> 
     <ItemTemplate> 
      <tr> 
       <td> 
        <input maxlength="3" size="4" type="text" id="addr" data-Value="" value="<%# Eval("addr")%>" /> 
        <input maxlength="4" size="4" type="text" id="place" data-Value="" value="<%# Eval("place")%>" /> 
       </td> 
       <td> 
        <input type="button" class="nbr" id="btn_update" value="Update" />      
       </td> 
      </tr> 
     </ItemTemplate> 
    </asp:ListView> 

Answer 1

#addr에 형제 자매이며, #place이 #addr 및 #place있는 유일한 일. 그들은 다른 형제가 없습니다. 그래서 당신의 논리가 잘못되었습니다. 무엇부터 선택하려고합니까?

또한 여러 번 복사 될 것으로 예상되는 템플릿을 사용하고있는 것처럼 보이기 때문에 id이 여러 개인 요소가 있습니다. 클래스를 대신 사용하십시오.

마지막으로 또 다른 팁은 동일한 것들을 재현하는 대신 jQuery 객체를 캐시하는 것입니다.

편집 : 당신의 갱신을 바탕으로, 문제가 버튼 nbr이 사촌하지 #addr 및 #place에 형제 것입니다. 당신이해야 할 일은 nbr에서부터 부모 td까지 이동 한 다음, 형제 인 td으로 이동 한 다음 그곳에있는 아이들까지 이동하는 것입니다. 이러한 맥락에서`this` 무엇

$('.nbr').click(function){ 
    var parent = $(this).parent().prev(); 
    var addrNode = parent.children(".addr").first(); 
    var placeNode = parent.children(".place").first(); 

    var newaddr = addrNode.val(); 
    var originaladdr = addrNode.data('Value'); 
    var newplace = placeNode.val(); 
    var originalplace = placeNode.data('Value'); 
    // whatever you want to do with these values... 
} 

Here's a fiddle to demonstrate