Question

How to find next element in jquery, i have following code

<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>

NOTE : here my “imgLoading[Binding ID]” and divData[bindingID] here, so everytime my id is not same , they are different in every items

what i am doing is , when you click on button, image will show ( image is gif to show the loading started) and i called $ajax -webmethod to load data in div , when data loaded, i will hide image

i want to hide image when we click on button and append data in div elements

thanks in advance

Answer 1

What you would need to do is use jQuery’s next() function –

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