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 [Binding ID]”和divData [bindingID]在这里，所以每当我的id不相同时，它们在每个项目中都不同

我正在做的是，当你点击按钮时，图像将显示（图像是gif以显示加载开始）并且我调用$ ajax -webmethod来加载div中的数据，当加载数据时，我将隐藏图像< / p>

我想在点击按钮并在div元素中追加数据时隐藏图像

提前致谢

Answer 1

试试这个：

$("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 2

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

根据需要使用适当的id / class / attribute / tag选择器。

直播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 3

您需要做的是使用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 4

尝试

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

 });

如何在jQuery中找到下一个元素？

4 个答案: