开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery 获取div内可见元素

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以轻松地选择页面上的元素，并对它们进行操作。

相关优势

简化 DOM 操作：jQuery 提供了一套简洁的 API 来处理 HTML 文档，使得开发者可以更方便地选择、操作和修改 DOM 元素。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得开发者无需担心兼容性问题。
丰富的插件支持：jQuery 社区提供了大量的插件，可以轻松实现各种功能，如轮播图、表单验证等。

类型

jQuery 可以用来获取页面上各种类型的元素，包括可见和不可见的元素。对于获取可见元素，可以使用 .filter() 方法结合 .is(':visible') 来实现。

应用场景

在网页开发中，经常需要获取并操作页面上可见的元素，例如：

动态显示/隐藏某些内容。
统计页面上可见元素的数量。
对可见元素进行特定的样式或行为设置。

示例代码

以下是一个使用 jQuery 获取 div 内可见元素的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 获取 div 内可见元素</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item hidden">Item 2</div>
        <div class="item">Item 3</div>
    </div>

    <script>
        $(document).ready(function() {
            var visibleItems = $('#container .item').filter(':visible');
            console.log('可见元素数量:', visibleItems.length);
            visibleItems.each(function() {
                console.log($(this).text());
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：为什么有些元素虽然设置了 `display: none`，但仍然被认为是可见的？

原因：display: none 只是隐藏了元素，但元素仍然存在于 DOM 中。如果元素有其他样式（如 visibility: hidden 或 opacity: 0），这些样式不会影响 :visible 选择器的判断。

解决方法：确保元素确实被设置为 display: none，并且没有其他样式影响其可见性。

var visibleItems = $('#container .item').filter(function() {
    return $(this).css('display') !== 'none';
});

通过上述方法，你可以准确地获取到 div 内所有可见的元素，并根据需要进行进一步的操作。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jquery获取元素绑定的事件

一个简单的记录，在调试jquery的事件绑定时会用到。查看某元素是否绑定上了事件。...在JQuery1.8之前： obj=$('div.event');obj.data('events'); 在JQuery1.8中： objs=$('div.event');$...._data(objs[0],'events'); 参考： http://stackoverflow.com/questions/12214654/jquery-1-8-find-event-handlers

4.2K2 0

jQuery获取和设置元素内容

1. html方法的使用 jquery中的html方法可以获取和设置标签的html内容示例代码: $(function(){ var $div = $("#...div1"); // 获取标签的html内容 var result = $div.html(); alert(result); //...$div.append("你好"); }); div id="div1"> hello div> 说明: 给指定标签追加html内容使用append方法 2....小结获取和设置元素的内容使用: html方法给指定元素追加html内容使用: append方法

31.1K8 5

jQuery获取和设置元素属性

script> $(function(){ var $a = $("#link01"); var $input = $('#input01') // 获取元素属性...var sId = $a.prop("id"); alert(sId); // 设置元素属性 $a.prop({"href":"http...://www.baidu.com","title":'这是去到百度的链接',"class":"a01"}); // 获取value属性 // var sValue =...$input.prop("value"); // alert(sValue); // 获取value属性使用val()方法的简写方式 var sValue...小结获取和设置元素属性的操作可以通过prop方法来完成获取和设置元素的value属性可以通过val方法来完成，更加简单和方便

30.9K7 5

jquery获取第几个子元素_js获取元素的指定子元素

val(); $( this ).children( "input:last-child" ).val(); 通过>选择器，$(“.items>input:first”) 在这里转一篇《jQuery...只是取的是最后一个； :only– child：返回所有没有兄弟节点的元素，注意，文本元素不是，也就是说类似这样的div>hellojquerydiv>，对于这段会选出...An+B的所有子节点，比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素； :even：页面范围内的处于偶数位置的元素，如：li:even返回全部偶数li元素； :odd：页面范围内的处于奇数位置的元素...V开头的； E[A 4.利用jQuery自定义的选择器进行选择： :button：选择任何按钮类型的元素，包括input[type=submit]等等； :checkbox：选择复选框元素； :file...：选择已选中的选项元素； :visible：选择可见元素； :enable：选择界面上已经可以使用的表单元素； :disabled：选择界面上被禁用的表单元素； :checked：选择已选中的复选框或单选按钮

27.2K3 0

js判断元素在某个区域内是否可见（转）

getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置...Right = ro.right; var Width = ro.width||Right - Left; var Height = ro.height||Bottom - Top; //有了这个方法，获取页面元素的位置就简单多了...以前的办法是通过各种offset判断元素是否可见，网上很多教程，大家可以自己去查找。 ...getBoundingClientRect是获取可视区域相关位置信息的，使用这个属性来判断更加方便： function isElementInViewport (el) { var rect =...caniuse 参考网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect https://div.io

7.6K2 0

jquery对div元素进行鼠标移动（稍稍修改下可以实现div跟随鼠标）

/* 网上找了资料都是对于event.clientX和offset().left进行了计算，但是去掉了这个计算方式，直接使用当前坐标也一样，效果都一样不太好 strHeader:标题 jquery定位字符串...strForm：窗体 jquery定位字符串 */ var isMove = false; //var x = 0; //var y = 0; //var offx = 0; //var offy =

2.5K4 0

jquery 获取鼠标和元素的坐标点

获取当前鼠标相对img元素的坐标 $('div').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left;...//获取当前鼠标相对div的X坐标 varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对div的Y坐标 console.log...(offset()方法) var offset = obj.offset(); 获取对象元素的位置，分别是元素的top和left，调用方法是：offset.left和offset.top，可知当前对象的左部和顶部位置...3，获取对象元素的宽度(width()方法) var right = offset.left+obj.width(); 实例中是获取对象的右下角位置，创建新窗口的左部位置。...4，获取对象元素的高度(height()方法) var down =offset.top+obj.height(); 实例中是获取对象的右下角位置，创建新窗口的顶部位置。

2.4K4 1

jquery中获取元素的几种方式小结

1 从集合中通过指定的序号获取元素 div> 0 1 2 3 4 5 6 7 7号 div> //获取元素的下一个元素 jQuery(function(){ $("p").next(".yes").css("color...","red"); }) //获取元素的上一个元素 jQuery(function(){ $("p").prev(".yes").css("color","red"); }) 5 获取元素的父元素和子元素.../p> 7号 div> //获取元素的父元素 jQuery(function(){ $("p").parent().css("color","red..."); }) //获取元素的子元素 jQuery(function(){ $("#aa").children(".yes").css("color","red"); })

1.9K3 0

jquery获取元素到页面顶部的距离

这时就会用到获取需要固定在页面位置的元素距离页面顶部的距离，通过比较文档滚动条到顶部的距离和页面元素到顶部距离的大小便可确定。...在jquery中有一个语句可以获取到元素到顶部的距离，语法为 $(selector).offset().top 下面看一个例子 div style="height:800px"> div> div...span style="font-family:Arial;">© luofanting.com.cn div...> 那么 $("#footer_luofanting_com_cn").offset().top 就是元素到页面顶部的距离。

5.3K2 0

jQuery判断当前元素是第几个元素&获取第N个元素

jQuery判断当前元素是第几个元素如果我们点击任何一个li标签，想知道当前点击的是第几个li标签，可以使用下面的代码： $("ul li").click(function () { var ...index = $("ul li").index(this); alert(index); }); 如上面的jQuery代码，如果点击的第一个会提示”0″,如果是第二个li标签会提示”1″,注意索引序列号是从...jQuery 获取第N个元素同理，如果我们要获取第二li标签元素，可以使用下面的代码 var element=$("ul li").eq(1); alert($(element).html()); 注意索引是从...以上就是jQuery判断当前元素是第几个元素和jQuery获取第N个元素的示例方法本文为仙士可原创文章,转载无需和我联系,但请注明来自仙士可博客www.php20.cn 上一篇：...分享一个好用的触摸事件插件touchswipe 下一篇： jquery 获取单选框值的方法

3.3K2 0

jquery获取紧邻的上一个元素

本章节分享一段代码实例，它实现了获取紧邻的上一个同级元素的功能。代码实例如下: <!...height: 25px; line-height: 25px; font-size: 12px; } jquery.../1.9.0/jquery.js"> $(document).ready(function () { $("#antzone... 分享和互助式进步的最大原动力本站的url地址是pipipi.net div id="show">div> </

1.3K2 0

jquery获取第几个元素的方法总结

使用jquery时经常会遇到，选择器选择一组元素后，需要在这组元素中找到第几个元素。...jquery中使用eq()方法找到第几个元素或第N个元素，jquery中eq()的使用如下： eq() 选择器选取带有指定 index 值的元素。...index 值从 0 开始，所有第一个元素的 index 值是 0(不是 1)。经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素。...另一种写法 $(":eq(index)") 如：$("p:eq(1)") 附另一种办法的例子 jquery-latest.js"...msn qq 或者这样写 jquery

1K1 0

jquery 与javascript 获取元素尺寸大小的对比

jquery获取尺寸的方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。...innerWidth() 方法返回元素的宽度（包括内边距）。 innerHeight() 方法返回元素的高度（包括内边距）。 outerWidth() 方法返回元素的宽度（包括内边距和边框）。...outerHeight() 方法返回元素的高度（包括内边距和边框）。 js获取尺寸的方法 clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。...offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 Window 尺寸有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

1.8K3 0

jquery 获取元素(父节点,子节点,兄弟节点)

1、jquery 获取元素(父节点,子节点,兄弟节点) $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1")....之后所有兄弟节点 $("#test1").siblings(); // 所有兄弟节点 $("#test1").siblings("#test2"); $("#test").find("#test1"); 2、元素筛选...// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素 $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first...(); // 选取ul li中匹配的第一个元素 $("ul li").last(); // 选取ul li中匹配的最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素...$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素

5.6K1 0

js、jQuery 获取文档、窗口、元素的各种值

基于两年开发经验，总结了 javascript、jQuery 获取窗口、文档、元素的各种值 javascript：文档：是整个document所有的内容浏览器当前窗口文档body的宽度： document.body.clientWidth...： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth jQuery...(即网页被卷左去的宽度)：$(document).scrollLeft(); 获取或设置元素的宽度：$(obj).width();(width) 注意只是元素的宽度，不包括padding 获取或设置元素的高度...：$(obj).height();(height) 注意只是元素的高度，不包括padding 获取或设置元素的宽度：$(obj).innerWidth(); (width + padding) 获取或设置元素的高度...offsetY ： offsetY和layerY的不同在于，前者的在计算偏移值时，相对于元素的border左上角的内交点，因此当鼠标位于元素的border上时，偏移值是一个负值

14.1K3 2

jquery实现的倒数获取li元素简单介绍

比如我要获取倒数第二个li元素，下面就是此功能的演示。代码如下: 前端 jquery.../1.9.0/jquery.js"> $(document).ready(function(){ var text... 每一天都是新的要好好真心 div id="show">div> 上面的代码实现了我们的要求，实现的原理也非常的简单。...大家eq()的参数为0的时候就是获取第一个元素，为1的时候就是第二个元素，以此类推。所以当参数为-1的时候理所当然就是倒数第一个，那么-2就是倒数第二个，以此类推。

1.8K3 0

JavaScript与jQuery获取元素的宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。... id="myDiv"> div> var div = document.getElementById("myDiv"); console.log(div.getBoundingClientRect...） scrollWidth ：元素的整个宽度（包括带滚动条的隐蔽的地方）鼠标滚动距离 scrollLeft ：是该元素的显示（可见）的内容上边与该元素实际的内容的距离（滚动条滚去的宽度） scrollTop...：是该元素的显示（可见）的内容与该元素实际的内容的距离（滚动条滚去的高度） jQuery中： ?...只对可见元素有效，注意ele{visibility：hidden}也属于可见元素。

3.1K0 0

JavaScript 技术篇-js获取iframe内的元素方法。

var a = document.querySelector("iframe") 获取到iframe。...var b = a.contentWindow.document 获取到iframe里的document。 b.getElementById("...") 就能获取到iframe里元素的id了。

18.7K5 1

JQuery如何获取ID含有特殊字符的DOM元素

为业务需要，DOM元素的ID被命名为“c-order.range”，执行JQuery的DOM查询时，提示如下错误 Uncaught Error: Syntax error, unrecognized expression...解决办法：document.getElementById 以前总觉得这个办法笨拙，现在越觉得此方法强大，几乎就是大杀器，没有查询不了的元素，无论你的元素ID命名多么刁钻。...var rowId = 'c-order.range', view = document.getElementById(rowId), // 将Element对象转换为JQuery对象

10.8K2 0

CSS一个div内两个子元素的高度自适应

---- 设想这样一个情况：一个父元素有两个子元素，父元素的高度不确定，用子元素撑起来。但是这会导致一个问题：各个子元素的高度不一致，为子元素添加height:100%是无效的。...这种方式需要父元素高度确定，然而父元素的高度由子元素确定。猜想渲染时由于父元素高度不确定，会计算出各个子元素的高度再确定父元素高度，但计算子元素高度时并没有父元素高度可以参考，因此上述方法行不通。...你可以为父元素设置固定高度配合height:100%，两个子元素都能撑满父元素利用span元素与布局如果span的定位是absolute类型，那么它的高度可以等于父元素的高度。...父元素只根据相对定位的子元素决定高度，也就是说，absolute定位的span设置height:100%是有效的，父元素的高度对它来说是已知的。...这种方法下，父元素的高度仍然由最高的相对定位的子元素确定，其它元素放到span中，所以需要知道最高的子元素。使用同色背景虽然很简单，却很实用的方法。子元素的高度虽然不都是100%，但效果一样。

5.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭