jQuery .next() 不起作用，元素保持为空

Posted 2023-02-25

【中文标题】jQuery .next() 不起作用，元素保持为空

【英文标题】：jQuery .next() not working, element stays empty

【发布时间】：2014-05-22 06:25:42

【问题描述】：

我正在尝试使用 jQuery .next() 将 html 添加到 div，但我没有得到任何结果。

这是html部分：

<div class="widget widget_border">

  <h3 class="widget_border" id="widget_lot">Last opened tasks 
      <div class="dashboard_dd_arrow"></div>
  </h3>
  <div class="widget_content"></div>
</div>

和 javascript：

(document).ready(function () 
  $('.widget h3').on('click', function () 
    if (!$.trim($(this).next('.widget_content').html())) 
      // if this widget don't have any data send ajax and load it

      var widget_id = $(this).attr('id');
      switch (widget_id) 
      case 'widget_lot':
        $.ajax(
          type: 'POST',
          url: '/dashboard/ajax_last_opened_tickets',
          data: ,
          success: function (data) 
            console.log(data);
            $(this).next('.widget_content').html('test');
          
        );
        break;
      
     else 
      // show current one
      $(this).next('.widget_content').slideToggle().parent().toggleClass('active');
    
  );
);

Ajax 调用顺利，我得到了所需的数据，但.next() 函数没有用widget_content 类填充div。

对此有任何解决方案或想法吗？

谢谢。

【问题讨论】：

.children 不是 .next ，寻找当前元素之后的元素

我认为下一个很好，因为 op 正在从 h3 中查找 div.widget_content .. 这是下一个元素而不是子元素。

jsfiddle.net/rohitbatham/UEg38/2

【参考方案1】：

尝试在 ajax 调用之外缓存 $(this) 引用，并在其成功回调中使用它。喜欢，

 _this.next('.widget_content').html('test');

注意：以上代码中的_this 仅用于演示目的。

【讨论】：

@zinho 很高兴为您提供帮助..！如果您认为此答案对您有所帮助，请尝试单击此答案左上角的勾号。这不是强迫。 :)

【参考方案2】：

你需要在子函数中备份这个

$('.widget h3').on('click', function()
    if( !$.trim($(this).next('.widget_content').html()) )
    
        // if this widget don't have any data send ajax and load it

        var widget_id = $(this).attr('id');
        var _this = this; // backup this
        switch (widget_id) 
            case 'widget_lot':
                $.ajax(
                    type:'POST',
                    url: '/dashboard/ajax_last_opened_tickets',
                    data:,
                    success:function(data)
                        console.log(data);
                        $(_this).next('.widget_content').html('test'); //edit here
                    
                );
                break;
        
    
    else 
        // show current one
        $(this).next('.widget_content').slideToggle().parent().toggleClass('active');
    
);

【参考方案3】：

在您的 AJAX 函数中，$(this) 不是您认为的那样，因为它指的是成功函数/ajax 请求。你应该这样做：

var $self = $(this);
$.ajax(
     type:'POST',
     url: '/dashboard/ajax_last_opened_tickets',
     data:,
     success:function(data)
         console.log(data);
         $self.next('.widget_content').html('test');
     
);

希望这会有所帮助。

【参考方案4】：

$(this) 内部成功指向当前方法而不是顶部方法。保存到变量中。

( document ).ready(function() 
$('.widget h3').on('click', function()
    var $this = $(this);
    if( !$.trim($this.next('.widget_content').html()) )
    
        // if this widget don't have any data send ajax and load it

        var widget_id = $this.attr('id');
        switch (widget_id) 
            case 'widget_lot':
                $.ajax(
                    type:'POST',
                    url: '/dashboard/ajax_last_opened_tickets',
                    data:,
                    success:function(data)
                        console.log(data);
                        $this.next('.widget_content').html('test');
                    
                );
                break;
        
    
    else 
        // show current one
        $this.next('.widget_content').slideToggle().parent().toggleClass('active');
    
);
);