jquery - 选择没有"display:none"的第一个元素
jQuery 选择没有 "display:none" 的第一个元素
基础概念
在 jQuery 中，要选择没有 display:none 样式的第一个元素，我们需要理解几个关键点：
:visible选择器 - 选择当前可见的元素（包括visibility:hidden或opacity:0的元素）:hidden选择器 - 选择当前隐藏的元素- CSS 的
display属性 - 当设置为none时元素不显示且不占据空间
解决方案
方法1：使用 :visible 选择器
$('selector:visible').first();方法2：使用 not() 和 filter()
$('selector').not(':hidden').first();
// 或
$('selector').filter(function() {
return $(this).css('display') !== 'none';
}).first();方法3：检查 display 属性
$('selector').filter(':not([style*="display:none"])').first();示例代码
<div class="item">Item 1 (visible)</div>
<div class="item" style="display:none">Item 2 (hidden)</div>
<div class="item">Item 3 (visible)</div>
<div class="item" style="display:none">Item 4 (hidden)</div>
<div class="item">Item 5 (visible)</div>
<script>
$(document).ready(function() {
// 方法1
var firstVisible1 = $('.item:visible').first();
console.log('方法1找到的元素:', firstVisible1.text());
// 方法2
var firstVisible2 = $('.item').not(':hidden').first();
console.log('方法2找到的元素:', firstVisible2.text());
// 方法3
var firstVisible3 = $('.item').filter(function() {
return $(this).css('display') !== 'none';
}).first();
console.log('方法3找到的元素:', firstVisible3.text());
});
</script>注意事项
:visible选择器不仅排除display:none的元素，还排除宽度或高度为0的元素- 如果元素是通过 CSS 类隐藏的（而非内联样式），上述方法同样适用
- 对于动态显示/隐藏的元素，可能需要使用事件监听或观察者模式来检测变化
性能考虑
对于大型 DOM 结构，filter() 方法可能比 :visible 选择器更高效，因为 :visible 选择器需要 jQuery 进行更多的计算来判断元素的可见性。
相关·内容
没有搜到相关的文章
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
