如何使用jQuery找到具有特定类和CSS样式的元素?
问题描述:
下面是代码的样子:如何使用jQuery找到具有特定类和CSS样式的元素?
<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
集获得div
到block
。一旦我有这div
我想对该div
进行进一步的行动。我尝试使用类似
$('.class1 .class2 .class3 .class4').find('.class5').is(':visible')
但它不起作用。
答
你有问题在于is()
返回一个布尔,反映是否传入的元件(或所述第一传入的元素)相匹配的提供的参数。
如果切换到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>
参考文献:
答
作为例子:
if($('.class1 .class2 .class3 .class4')
.find('.class5:first')
.is(':visible')){
console.log('yes');
}
答
其实每div
与class5
类有一个display: block
属性。
display: block
属性是每个块元素的默认状态(divs
是块元素)。
我已将其他div的display
属性设置为none
,只是为了显示以下代码的功能。
$('div').each(function() {
if ($(this).hasClass('class5') && $(this).is(":visible")) {
console.log($(this).html());
}
})
<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' style="display:none;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 2</p>
</div>
</div>
<div class='class4'>
<div class='class5' value='t' style="display:block;">
<p>Some text 3</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 4</p>
</div>
</div>
</div>
</div>
</div>
答
.is()
返回一个布尔值,你可以使用里面find()
的pseudo-selector
选择元素:
$('.class1 .class2 .class3 .class4').find('.class5:visible')
答
$('.class5').each(function(){
if ($(this).is(":visible")) {
//What you want to do
}
});
答
ÿ OU可以做到这一点直接
alert('is visible?', $('.class5').is(':visible'));
答
这将返回具有display:block属性的.class5。在你的情况下,它将返回所有的元素。因为div中的所有div都包含默认的显示属性块,所以它会在你的情况下返回所有的div。如果你尝试,那么你确保只有你想要选择的元素(.class5)具有显示块属性。
var selector = $('.class1 .class2 .class3 .class4').find('.class5').filter(function() {
return $(this).css('display') == 'block';
});
请将代码粘贴到问题中时缩进代码;这使得阅读更容易。 –
检查https://jsfiddle.net/fqqbqyb8/1/ – CognitiveDesire
$('。class1 .class2 .class3 .class4')。find('.class5')。filter(':visible')' – bassxzero