关键词：
【中文标题】如何在显示时使用 jQuery 对元素进行操作：无【英文标题】：How to operate on element using jQuery whilst it is display:none 【发布时间】：2018-11-27 02:01:20 【问题描述】：场景
我有一个仪表板，其中一些小部件分组到用户可以单击的选项卡中。小部件具有默认的起始高度，当它们包含的内容（图表、图形、表格等）呈现时，它们的高度会更新。
我目前仅在页面加载时更新活动选项卡中小部件的高度，然后当用户单击不同的选项卡时更新这些小部件。
问题
我必须使用setTimeout 以确保在更新高度之前活动选项卡可见，这意味着小部件在单击后会立即向下滑动，而不是立即以最佳高度出现。
问题
-
有没有办法在加载时更新所有小部件的高度，即使是隐藏在其他选项卡上的带有
display:none 的小部件？
我尝试使用 :visible 和 :hidden 选择器，但没有成功。
-
我是否应该坚持我目前的性能方法，因为最终可能会有许多小部件跨越许多选项卡？如果是这样，是否可以在没有
setTimeout 的情况下完成，因为我只是猜测 200 毫秒的延迟就足够了。
剥离示例
下面的例子，加上Codepen。
$(document).foundation();
$(function ()
var options =
cellHeight: 40,
verticalMargin: 28,
animate: true,
;
widgetsInit = function(options)
var targetPanel = '.tabs-panel.is-active';
setTimeout(function()
$(targetPanel + ' .grid-stack').gridstack(options);
$(targetPanel + ' .grid-stack .grid-stack-item').each(function(i)
$(targetPanel + ' .grid-stack').data('gridstack').resize(
$(targetPanel + ' .grid-stack .grid-stack-item')[i],
$($(targetPanel + ' .grid-stack .grid-stack-item')[i]).attr('data-gs-width'),
Math.ceil(($(targetPanel + ' .grid-stack .grid-stack-item .grid-stack-item-content')[i].scrollHeight + $(targetPanel + ' .grid-stack').data('gridstack').opts.verticalMargin) / ($(targetPanel + ' .grid-stack').data('gridstack').cellHeight() + $(targetPanel + ' .grid-stack').data('gridstack').opts.verticalMargin))
);
);
, 200);
widgetsInit(options);
$('.tabs-title').on('click', function(e)
widgetsInit(options);
)
);.grid-stack > .grid-stack-item > .grid-stack-item-content
background-color: #fff;
cursor: move;
border: 1px solid #e3e3e3;
border-radius: 4px;
padding: 1rem;
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<!-- Tabs start -->
<ul class="tabs dashboard-tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-match->
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Panel 1</a></li>
<li class="tabs-title"><a href="#panel2">Panel 2</a></li>
</ul>
<!-- Tabs end -->
<!-- Panels start -->
<div class="tabs-content unstyled" data-tabs-content="example-tabs">
<!-- Panel 1 start -->
<div class="tabs-panel is-active" id="panel1">
<div class="grid-stack">
<div class="grid-stack-item" data-custom-id="0" data-gs-x="0" data-gs-y="0" data-gs->
<div class="grid-stack-item-content">
#0<br>
<iframe src="https://www.youtube.com/embed/VUuBJ0ietME" frameborder="0"></iframe>
</div>
</div>
<div class="grid-stack-item" data-custom-id="1" data-gs-x="4" data-gs-y="0" data-gs->
<div class="grid-stack-item-content">
#1
</div>
</div>
<div class="grid-stack-item" data-custom-id="2" data-gs-x="8" data-gs-y="0" data-gs->
<div class="grid-stack-item-content">#2</div>
</div>
<div class="grid-stack-item" data-custom-id="3" data-gs-x="0" data-gs-y="1" data-gs->
<div class="grid-stack-item-content">#3</div>
</div>
</div>
</div>
<!-- Panel 1 end -->
<!-- Panel 2 start -->
<div class="tabs-panel" id="panel2">
<div class="grid-stack">
<div class="grid-stack-item" data-custom-id="4" data-gs-x="0" data-gs-y="0" data-gs->
<div class="grid-stack-item-content">
#4<br>
<iframe src="https://www.youtube.com/embed/a4fv-BtzNmY" frameborder="0"></iframe>
</div>
</div>
<div class="grid-stack-item" data-custom-id="5" data-gs-x="6" data-gs-y="0" data-gs->
<div class="grid-stack-item-content">#5</div>
</div>
</div>
</div>
<!-- Panel 2 end -->
</div>
<!-- Panels end -->【问题讨论】：
【参考方案1】：这里有一些事情在起作用。我已经创建了一个关于如何处理它的分支。 https://codepen.io/matthewblewitt/pen/KeybxG
我使用基础选项卡 API 而不是单击事件触发了 gridstack 插件，因此您可以删除 setTimeout。
$(document).on('change.zf.tabs', function(e)
widgetsInit(options);
);
基础选项卡使用display: none 隐藏非活动选项卡，而gridstack 插件似乎与该属性不兼容。因此，我更改了 CSS 以隐藏屏幕上的非活动选项卡，并使用 CSS 不透明度和禁用 gridstack 的动画来淡化它们。
.tabs-panel
position: absolute;
overflow: hidden;
height: 1px;
width: 1px;
opacity: 0;
transition: 0.75s opacity ease;
display: block;
.tabs-panel.is-active
position: static;
overflow: visible;
width: auto;
height: auto;
opacity: 1;
希望这会有所帮助。
【讨论】：
更多关于事件驱动基础选项卡 API 的信息在这里 foundation.zurb.com/sites/docs/tabs.html#js-events 我喜欢这种方法，褪色看起来很优雅。谢谢。如何使用 jQuery 对表单提交进行验证
】如何使用jQuery对表单提交进行验证【英文标题】：HowtodovalidationonformsubmitusingjQuery【发布时间】：2018-11-1604:27:57【问题描述】：我有三个文本框，我在keyup上用-替换%。但我想在提交时执行此操作。我不想向用户显示替换，但在... 查看详情
当动态值匹配时，jQuery 按类对元素进行分组
...述】：我有一个来自VB的数组，该数组当前以div集的形式显示在页面上。我想使用jQuery根据匹配值对div标签进行分组，但我似乎无法让它们匹配。这就是显示的内容。这些值是基于数组的动态值，所以我不能说value=11/19 查看详情
使用 jQuery 检查元素是不是为“显示：无”或单击时阻塞
】使用jQuery检查元素是不是为“显示：无”或单击时阻塞【英文标题】：Check,usingjQuery,ifanelementis\'display:none\'orblockonclick使用jQuery检查元素是否为“显示：无”或单击时阻塞【发布时间】：2013-04-0205:30:38【问题描述】：我想检查... 查看详情
jquery的闭包(理解执行函数)
在前端进行元素集操作时肯定会有each操作但是each操作的动作都会在所有所有元素遍历完后才会进行生效，故如果需要在遍历元素时就要使其操作生效的话，就需要在each元素时进行立即执行函数进行调用以下是jquery的demo代码(一... 查看详情
jQuery - 不可见时获取元素的宽度（显示：无）
】jQuery-不可见时获取元素的宽度（显示：无）【英文标题】：jQuery-GetWidthofElementwhenNotVisible(Display:None)【发布时间】：2010-12-0103:12:33【问题描述】：似乎在jQuery中当元素不可见时width()返回0。有道理，但我需要获取表格的宽度才... 查看详情
使用 jquery 对附加的 DOM 元素进行操作
】使用jquery对附加的DOM元素进行操作【英文标题】：OperationsonappendedDOMelementswithjquery【发布时间】：2018-01-1700:32:07【问题描述】：我有一个表单，其中有一组正在加载的字段<formid="questionsForm"method="post"action="/author">csrf_field()&l... 查看详情
当元素为（显示：无）时如何显示选中的收音机元素
】当元素为（显示：无）时如何显示选中的收音机元素【英文标题】：howtodisplayelementsofcheckedradiowhenelementare(display:none)【发布时间】：2021-11-0419:13:02【问题描述】：我要做一个复选框，里面有值。但是如果选择了默认的radio，里... 查看详情
在 Angular 中使用 Jasmine 使用 *ngIf 指令时，如何对元素是不是可见进行单元测试
】在Angular中使用Jasmine使用*ngIf指令时，如何对元素是不是可见进行单元测试【英文标题】：HowdoIunittestifanelementisvisiblewhenthe*ngIfdirectiveisusedusingJasmineinAngular在Angular中使用Jasmine使用*ngIf指令时，如何对元素是否可见进行单元测试【... 查看详情
当通过jquery在dom中添加html元素时如何自动对html元素执行功能
】当通过jquery在dom中添加html元素时如何自动对html元素执行功能【英文标题】：howtoautomaticallyperformafunctiononahtmlelementwhenitaddedindombyjquery【发布时间】：2015-06-0700:27:39【问题描述】：我想在添加到DOM时自动对具有特定类的html元素执... 查看详情
jQuery异步函数调用，无AJAX请求
...2011-10-1318:12:13【问题描述】：这似乎很愚蠢，但我找不到如何使用不涉及某些服务器端请求的jQuery进行异步函数调用。我有一个缓慢的函数，它遍历了很多DOM元素，我希望浏览器在这个函数运行时不会冻结。我想在调用慢速函数... 查看详情
jQuery 对象和 DOM 元素
...想了解之间的关系..当jQuery返回一个元素时，它在警报中显示为[objectObject]。当getElementByID返回一个元素时，它显示为[objectHTMLDivElement]。这到底是什么意思？我的意思是它们都是有区别的对象吗？还有哪些方法可以对进行操作？... 查看详情
jquery小节
...ery语法jQuery选择器在前面的章节中，我们展示了一些有关如何选取HTML元素的实例。关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进... 查看详情
对select的各种操作（jquery）
在写表单时，经常要用到select元素，这个元素相较于其他文本框标签而言有不同。最近在写一个页面表单时需要对select进行各种操作，现将其用法收集并总结如下：HTML元素：<selectid="relationship"name="relationship"required="true"><op... 查看详情
如何使用 jquery 对 api 进行 jsonp 调用
】如何使用jquery对api进行jsonp调用【英文标题】：Howtomakeajsonpcalltoanapiusingjquery【发布时间】：2011-05-1209:50:44【问题描述】：我一般是编程新手，当我调用moviedb.orgapi时，我无法将数据导入我的网络应用程序。我正在使用jquery，我... 查看详情
jquery对dom节点进行操作(删除节点)(代码片段)
...回值时一个指向已被删除的节点的引用，以后也可以继续使用这些元素。<body><scripttype="text/javascript">//入口函数$(docu 查看详情
重新复习jquery的一些知识点
今天来复习jQuery的DOM操作。jQuery中DOM的操作是很常见的，简单的创建一个元素，就直接在$()中写入需要创建的标签，如$("<div></div>")就是创建了一个空的div元素。对元素的属性进行操作，用的是attr()这个方法，可以... 查看详情
vector与list在对序列元素进行增删操作时性能的比较(代码片段)
...5-2：编写完整的新版计算学生成绩的程序，并且使用vector抽取不及格的学生的记录。然后再编写一个使用list的版本。对与100行， 查看详情
jquery的功能
...元素，使得目标元素达到我们想要的位置。（1）方法是使用.insertAfter()，把div元素移动p元素后面：（2）方法是使用.after()，把p元素加到div元素前面：表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同... 查看详情