jquery - 如何在 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[Binding ID]”和 divData[bindingID]，所以每次我的 id 不同时，它们在每个项目中都是不同的

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

当我们单击按钮并在 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 演示。

也许你可以试试这样的 -

<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()功能-

$('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
 });

 });