使用jquery加载隐藏的div -检测哪个div
使用jQuery加载和检测隐藏的div
基础概念
在jQuery中，可以通过多种方法来加载和检测隐藏的div元素。隐藏的div通常是指那些在HTML中已经存在但被CSS隐藏（如display: none或visibility: hidden），或者通过jQuery方法（如.hide()）隐藏的元素。
相关方法
检测隐藏的div
- 使用
:hidden选择器： - 使用
:hidden选择器： - 使用
.is()方法检测： - 使用
.is()方法检测： - 检查CSS属性：
- 检查CSS属性：
加载隐藏的div
通常隐藏的div已经存在于DOM中，但如果需要动态加载：
// 动态创建并隐藏一个div
var newDiv = $('<div>').hide().text('我是新创建的隐藏div').appendTo('body');
// 或者
var newDiv = $('<div>').css('display', 'none').text('我是新创建的隐藏div').appendTo('body');常见问题及解决方案
问题1：为什么:hidden选择器没有选中所有隐藏的div？
原因：
:hidden选择器不仅匹配display: none的元素，还匹配visibility: hidden、表单元素type="hidden"以及宽度和高度为0的元素- 如果元素只是通过透明度（
opacity: 0）隐藏，不会被:hidden选中
解决方案：
// 更全面的隐藏检测
$('div').each(function() {
var $el = $(this);
if ($el.css('opacity') == '0' ||
$el.css('display') == 'none' ||
$el.css('visibility') == 'hidden' ||
$el.width() === 0 ||
$el.height() === 0) {
console.log('隐藏的div:', this);
}
});问题2：如何检测动态加载后变为可见的div？
解决方案： 使用MutationObserver监听DOM变化：
// 创建观察器实例
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
$(mutation.addedNodes).filter('div').each(function() {
if (!$(this).is(':hidden')) {
console.log('新添加的可见div:', this);
}
});
});
});
// 配置观察选项
var config = { childList: true, subtree: true };
// 开始观察目标节点
observer.observe(document.body, config);应用场景
- 懒加载内容：先隐藏内容，当用户滚动到特定位置时显示
- 选项卡切换：隐藏非活动选项卡内容
- 模态对话框：默认隐藏，需要时显示
- 响应式设计：在不同屏幕尺寸下隐藏/显示不同内容
完整示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery隐藏div检测示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.hidden-div { display: none; }
.invisible-div { visibility: hidden; }
.transparent-div { opacity: 0; }
</style>
</head>
<body>
<div class="hidden-div">我是display:none的div</div>
<div class="invisible-div">我是visibility:hidden的div</div>
<div class="transparent-div">我是opacity:0的div</div>
<div style="width:0;height:0;">我是尺寸为0的div</div>
<div>我是可见的div</div>
<button id="checkHidden">检测隐藏div</button>
<button id="addHiddenDiv">添加隐藏div</button>
<script>
$(function() {
// 检测隐藏div
$('#checkHidden').click(function() {
console.log('使用:hidden选择器找到的div:');
$('div:hidden').each(function() {
console.log(this);
});
console.log('全面检测隐藏div:');
$('div').each(function() {
var $el = $(this);
if ($el.css('opacity') == '0' ||
$el.css('display') == 'none' ||
$el.css('visibility') == 'hidden' ||
$el.width() === 0 ||
$el.height() === 0) {
console.log('隐藏的div:', this);
}
});
});
// 动态添加隐藏div
$('#addHiddenDiv').click(function() {
var newDiv = $('<div>').hide().text('我是动态添加的隐藏div - ' + new Date().toLocaleTimeString())
.appendTo('body');
console.log('已添加隐藏div:', newDiv[0]);
});
});
</script>
</body>
</html>这个示例展示了如何检测各种类型的隐藏div，包括使用不同CSS属性隐藏的div，以及如何动态添加隐藏的div。
相关·内容
我有一个页面与一些隐藏的div，他们将只显示时，他们的链接被点击。它将从这个空白的摘要页面开始当点击About时，它将加载关于内容以此类推..然而，我现在的脚本并不像我希望的那样是动态的。如何隐藏当前显示的div并加载用户正在单击的div？至于现在的脚本，就好像每个链接都会在页面
浏览 1提问于2017-12-06得票数 0
我想使用jQuery来检查div中是否有任何文本。如果不显示div，则将其隐藏。例如：$( document ).ready(function() {
$("#demo_d
浏览 7提问于2022-05-15得票数 1
回答已采纳
我想让Jquery检测某个div id是否加载到当前页面中，然后隐藏另一个div id元素，例如：<div id="C1" style="display: none;&qu
浏览 2提问于2012-09-17得票数 0
回答已采纳
2回答
我有一个url格式的我想做的是：我如何使用jQuery来完成它呢？通过隐藏div，然后根据条件显示页面，使用哪个css属性打开页面
想知道正确
浏览 4提问于2010-02-27得票数 0
我有一些简单的HTML： <div id="chainedSelector" style="display: none;"><% Html.RenderPartial我有一个cookie代码可以在显示它们之间切换，但我需要将用户上次登录时使用的jQuery存储为cookie(即，哪个是可见的)。co
浏览 0提问于2010-05-21得票数 3
回答已采纳
1回答
如何检测从隐藏元素中显示iframe的时间？HTML : <iframe></iframe>那么，当我通过<div>通过$('div').show();向jQuery展示$('div').show();时，如果是这样的话，如何
浏览 1提问于2013-05-03得票数 0
回答已采纳
想知道什么对SEO和蜘蛛更好，我很犹豫是否将样式设置为隐藏的div，因为google爬行器可能会丢弃这些类型的div--另一个注意事项:另一个选择是找到工具提示内容的每个div，并使用jquery在页面加载时隐藏</e
浏览 0提问于2010-12-29得票数 3
回答已采纳
如何用Jquery检测元素(哪个位置是绝对)水平地超出了视图端口，并将其设置为左: 0(以适应视图端口中的元素)，当具有溢出:隐藏属性时。<!DOCTYPE html><head> body,html{overflow: hidden;} position: absolute; width: 100%; margin-left: 30
浏览 4提问于2015-02-12得票数 0
回答已采纳
2回答
问题:无法成功检测checkbox上的单击或更改事件。方法一: Onclick处理程序<div class="col-md-1"><center>
<label><p>Recurring<&#x
浏览 0提问于2015-08-25得票数 0
我有一个ajax站点，在那里：将根据用户在哪个页面交换。当ajax加载我的内容时，我想启动jquery插件j
浏览 2提问于2013-06-05得票数 2
回答已采纳
我正在寻找一种非常简单的方法，当div中没有任何信息时将其隐藏。-对于客户来说，它需要简单，这样他们就不必担心了。
Div包含joomla在某些类别中输入的信息。例如，在我的主模板上，我可能在左侧的导航下面有一个div，我可以选择它在哪些页面中显示模块，但当它不使用时，它仍然显示它的边框。我也不想为网站使用许多不同的模板，只是有能力使用许多模块位置，但当它们不<e
浏览 2提问于2012-03-01得票数 2
回答已采纳
div>)的列表；当单击( toggle() )任何一个可见的链接<H4>时，会显示它们相应的先前隐藏的div( hide() )。链接<H4>和相关div的列表随着电子表格的增长而增长，就像注释表单一样。<H4> (hide())?If列表是否加载得更快(或者在页面上显示得更快)？当div被隐藏时，(hide(
浏览 2提问于2011-12-19得票数 0
我有一个jquery片段，当单选按钮更改时，它隐藏或显示一个div . jQuery('.div1').css({'display':'block'});
jQuery</e
浏览 2提问于2015-03-25得票数 0
回答已采纳
1回答
我对JS和JQuery非常陌生，我正在尝试完成一个包含滑动按钮的请求。步骤：
这里是我们的Jade-esque标记(非常相似，只是一些小的调整)。我知道要等到文档准备好，并且它是click(function())，但这就是我所能找到的</em
浏览 0提问于2015-04-20得票数 1
回答已采纳
描述:我想要的是，当页面上的所有帖子都加载时，带有"new_text_post“类的div应该被隐藏，该类稍后将被淡出切换(工作非常正常)。我不知道如何加载该div仍然隐藏，它应该传真切换时，我点击。
我
浏览 4提问于2014-10-24得票数 0
我想根据X的内容隐藏/显示Y，但是X是在页面加载后填充的(通过jQuery)。如何用jQuery检测到这个内容的变化。这就是我试图达到的目标(不起作用)的一个例子：
$('#field-first-div').change(function() { $
浏览 0提问于2018-09-04得票数 1
回答已采纳
我有一个带有溢出设置的div来隐藏元素。<div style="overflow:hidden; height:40px"> <div class="item">Item2</div>
<div class
浏览 1提问于2011-12-22得票数 0
回答已采纳
以下是问题所在：
单击gmail选项，它将重定向到googles、permissions和帐户选择，在那里他必须接受对他/她联系人列表的访问。一旦被接受，它再次重定向到我的主页，在那里我有一个var来知道它是否
浏览 5提问于2014-02-15得票数 1
10回答
所以我有一个div，加载起来很有趣，我的客户有点担心，但我想帮助他们。另一种方法可能是添加/删除类方法。我只是不确定在页面加载时让它处于一种状态，然后无限期地处于另一种状态(当然，除非页面被刷新)，这样的代码应该是什么样子的
jQuery(
浏览 1提问于2012-03-17得票数 0
回答已采纳
使用jquery移动可折叠集(Accordian) div，我使用data.On扩展了可折叠的div加载了多个节，我只需要显示来自服务器端的前20个数据。当向下滚动并到达展开的可折叠div部分的第20个数据的末尾时，我需要从服务器端加载到下一个20个数据，并将其附加到同一展开的可折叠部分的末尾。哪个事件或侦听器
浏览 2提问于2013-01-25得票数 0
云服务器
ICP备案
云直播
对象存储
即时通信 IM
腾讯云开发者
