JQuery在使用find()和children()时返回空数组
最近我在jQuery中遇到了一些遍历问题。我们有一个web应用程序，并且有多个面板，每个面板都有一个标题和一个正文。在标题中，有一个用于展开/折叠面板主体的按钮。面板的设置如下所示：
<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")选择了那里的面板主体。然而，对于这个问题，我只关心被按下的相应按钮的面板。
回答 2
Stack Overflow用户
发布于 2013-06-07 15:23:46
编辑:我现在看到你在使用Backbone了。查看this，您可以看到this是主干视图，而不是DOM元素。要获取jQuery元素，必须使用该链接的代码中所示的this.$，而不是$(this)。
EIDT2:对于任何未来的读者来说，这就是问题，但不是确切的解决方案。OP能够(如评论中所述)，替换以下内容：
var panel = $(this);有了这个：
var panel = this.$el;每件事都相应地运转起来。
Stack Overflow用户
发布于 2017-02-22 05:48:37
(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>');上面的代码获取我的表，在我的例子中是HTML，并搜索类dataTables_wrapper，然后附加我的clientsTable代码块
https://stackoverflow.com/questions/16987304
复制相似问题
腾讯云开发者
