如何在jQuery中查找下一個元素？

Question

如何找到在jQuery的下一個元素，我有以下代碼

<div> 
<input id="btn<%# Eval("Id") %>" type="button" value="fetch"/> 
</div> 
<div> 
<img id="imgLoading<%# Eval("Id") %>" style="width: 200px;height: 10px; display: none" src="/Images/Loading.gif" /> 
</div> 
<div id="divData<%# Eval("Id") %>"></div> 

注：這裏我的「imgLoading [綁定ID]」和divData [bindingID]在這裏，所以每次我的id是不一樣的，他們是不同的每個項目

我在做什麼是，當你點擊按鈕，圖像會顯示（圖像是gif顯示加載開始），我叫$ ajax -webmethod加載數據在div中，當數據加載，我會隱藏圖像

我想隱藏圖像，當我們點擊o n按鈕，在div元素

感謝追加數據提前

Answer 1

你需要做的是使用jQuery的next() function -

$('input[type="button"]').on('click',function(){ 
    var imgLoadingElement = $(this).parent().next('div').find('img'); 
    var divDataElement = imgLoadingElement.parent().next('div[id^="divData"]'); 
}); 

Answer 2

試試這個：

$("input[type=button]").click(function() { 
    var img = $(this).closest("#imgLoading").show(); 
    var div = $(this).closest("#divData"); 

    $.ajax({ 
     url: ... 
     success: function(data) { 
     $(img).hide(); 
     $(div).html(data); 
     } 
    }); 
}); 

您也可以使用開始於選擇器（doc）。

$('input[id^=btn]').click(...) 

Answer 3

$("input[type='button']").click(function() { 
    $(this).closest('div').next('div'); // next div., containing the img 
              // element with id imgLoading.... 
}) 

使用合適的ID /類/屬性/標籤選擇，你認爲合適的。

生活JSFiddle Demo。

也許你可以嘗試這樣的事情 -

<div> 
    <input id="btn<%# Eval("Id") %>" type="button" value="fetch"/> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('input#btn<%# Eval("Id") %>').click(function() { 
      var nextDiv = $(this).closest('div').next('div'); 

      // do whatever you want with this div here 
     }); 
    }); 
</script> 
<div> 
    <img id="imgLoading<%# Eval("Id") %>" style="width: 200px;height: 10px; display: none" src="/Images/Loading.gif" /> 
</div> 
<div id="divData<%# Eval("Id") %>"></div> 

我必須承認，上面的代碼是醜陋的。如果您不想將JS代碼與html混合，則可以將此代碼移出到某個外部JS文件，但您需要確保input type="button"元素的特定ID。

Answer 4

嘗試

$(document).ready(function(){ 
$('yourButtonSelector').click(function(){ 
    $(this).parent().next().find('yourImageSelector');//.doaction 
    //or 
    $(this).closest('yourImageSelector');//.doaction 
}); 

});