代码如下:
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
我想要将 class5
和 CSS 属性 display
设置为 block
的 div
。一旦我有了这个 div
,我想对该 div
执行进一步的操作。我尝试使用类似的东西
$('.class1 .class2 .class3 .class4').find( '.class5').is(':visible')
但它不起作用。
最佳答案
您遇到的问题是 is()
返回一个 bool 值,反射(reflect)传入的元素(或第一个传入的元素)是否与提供的参数匹配。
如果切换到filter()
,它会根据提供的参数过滤传入的集合;如果元素匹配,则保留该元素,否则将其丢弃:
let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter( ':visible');
console.log(classFiveElems);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
但是,您想要的不仅仅是简单的可见性检查;而是简单的可见性检查。而是针对特定 CSS 属性的测试;所以我建议使用 filter()
但使用匿名函数:
let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter(function() {
return this.style.display === 'block';
}).addClass('found');
console.log(classFiveElems);
.found {
color: #f90;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
引用文献:
关于javascript - 如何使用 jQuery 查找具有特定类和 CSS 样式的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42587714/