如何使用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')

但它不起作用。

请将代码粘贴到问题中时缩进代码;这使得阅读更容易。 –

检查https://jsfiddle.net/fqqbqyb8/1/ – CognitiveDesire

$（'。class1 .class2 .class3 .class4'）。find（'.class5'）。filter（'：visible'）' – bassxzero

答

你有问题在于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>

参考文献：

filter()。
find()。
is()。

答

作为例子：

if($('.class1 .class2 .class3 .class4') 
      .find('.class5:first') 
       .is(':visible')){ 
    console.log('yes'); 
}

参见：https://jsbin.com/ninovic/edit?html,js,console,output

答

其实每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')

Example

答

$('.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'; 
       });

如何使用jQuery找到具有特定类和CSS样式的元素？

相关推荐