如何使用jQuery查找具有特定類和CSS樣式的元素？

Question

代碼如下所示：

<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')

但這不起作用。

Answer 1

您遇到的問題是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() 。

Answer 2

例如：

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

參見： https : //jsbin.com/ninovic/edit?html,js，控制台，輸出

Answer 3

實際上，每個具有class5類的div都有一個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> 

Answer 4

.is()返回一個布爾值，可以在find()使用pseudo-selector來選擇元素：

$('.class1 .class2 .class3 .class4').find('.class5:visible')

例

Answer 5

$('.class5').each(function(){
  if ($(this).is(":visible")) {
   //What you want to do  
   }
});

Answer 6

你可以直接做

alert('is visible?', $( '.class5').is(':visible'));

Answer 7

這將返回具有display：block屬性的.class5。 在您的情況下，它將返回所有元素。 因為div中的所有div都包含默認的顯示屬性塊，所以它將根據您的情況返回所有它們。 如果嘗試，則可以確保只有要選擇的elements（.class5）具有顯示塊屬性。

 var selector = $('.class1 .class2 .class3 .class4').find( '.class5').filter(function() {
                  return $(this).css('display') == 'block';
               });