Question

我最近在使用jQuery遍历时遇到了一些问题。我们有一个网络应用程序，有多个面板，每个面板都有一个标题和一个正文。在标题中，有一个用于展开/折叠面板主体的按钮。面板的设置类似于：

<div id="panel-1" class="panel">
  <div class="panel-header>
      <span>Header Text</span>
      <div class="toggle-expansion"></div>
  </div>
  <div class="panel-body">...</div>
  <div class="panel-footer">...</div>
</div>

<div id="panel-2" class="panel"> ... </div> 
...

我们正在使用Backbone.js来设置所有视图，并且有一个名为base-panel-view.js的文件，所有其他面板都是从这个文件扩展而来的。如果可能的话，我想把我的功能放在这里，所以我不必为每个面板重写功能。以下是base-panel-view.js文件的摘录：

...
       events: {
              ...
              "click .toggle-expansion" : "toggleExpansion"
       },
...
toggleExpansion: function() {
              var panel = $(this);                                   //Returns the entire panel
              var panelBody = panel.children(".panel-body");         //Should return the panel body
              var toggleButton = panel.find(".toggle-expansion");    //Should return the toggle button


              if(panelBody.hasClass("noDisplay")){
                     /* If the panel is collapsed, expand it */
                     panelBody.removeClass("noDisplay");
                     toggleButton.addClass("expanded").removeClass("collapsed");
              }else{
                     /* If the panel is expanded, collapse it */
                     panelBody.addClass("noDisplay");
                     toggleButton.addClass("collapsed").removeClass("expanded");                
              }             
       }
...

panel变量设置为整个面板，这是我的预期，但panelBody和toggleButton为空。在Chrome调试器中，我能够确认panel包含我按下的任何按钮的正确面板，我可以看到其他变量是空数组。在调试器中，我可以查看panel包含它的子节点的数组，其中包括面板主体和标题（包含按钮）。

有什么明显的事我说错了或不做吗？我仍然是Javascript和jQuery的新手，所以我完全有可能搞砸了一些基本步骤。任何帮助将不胜感激。

另外我可以确认css是正确的，因为我在其他地方制作了两个按钮来展开/折叠所有面板，然后我使用$(".panel-body")选择面板主体。但是对于这个问题，我只关注按下相应按钮的面板。

Answer 1

编辑：我现在看到你正在使用Backbone。查看this，您可以看到this是Backbone View，而不是DOM元素。要获取jQuery元素，您必须使用this.$，如该链接中的代码所示，而不是$(this)。

EIDT2：对于任何未来的读者来说，这是问题，但不是确切的解决方案。 OP能够（如评论中所述）替换为：

var panel = $(this);

用这个：

var panel = this.$el;

一切都有效。

Answer 2

(this).$element

在jQuery函数中，this通常引用您正在处理的实际DOM元素，而$(this)返回包装元素的jQuery对象。

以下是示例代码

this.$('#clientsTable')
    .closest('.dataTables_wrapper')
    .find("div.toolbar")
    .html('<div class="table-tools-actions"><button class="btn btn-primary" id="addSelectedClients" onClick = addAllSelectedMembers()>' + "Add" + '</button></div>');

以上代码采用我的表格，在我的情况下是 clientsTable ，并搜索类 dataTables_wrapper 和然后附加我的HTML代码块

使用find（）和children（）时JQuery返回空数组

2 个答案: