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>

我想将div与class5和CSS属性display设置为block。我有div后，我想对div执行进一步操作。我尝试过像

这样的东西

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

但它不起作用。

Answer 1

你遇到的问题是is()返回一个布尔值，反映传入的元素（或传入的第一个元素）是否与提供的参数匹配。

如果切换到filter()，它会根据提供的参数过滤传入的集合;如果元素匹配则保留该元素，否则它被丢弃：

＆＃13;

let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter( ':visible');

console.log(classFiveElems);

＆＃13;

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

＆＃13;

但是，您想要的不仅仅是对可见性的简单检查;但是测试特定的CSS属性;所以我建议使用filter()，但使用匿名函数：

＆＃13;

let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter(function() {
  return this.style.display === 'block';
}).addClass('found');

console.log(classFiveElems);

＆＃13;

.found {
  color: #f90;
}

＆＃13;

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

＆＃13;

参考文献：

Answer 2

例如：

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

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

Answer 3

实际上，每个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>

Answer 4

.is()返回一个布尔值，您可以使用find()内的pseudo-selector来选择元素：

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

Example

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都包含默认的显示属性块，所以它会在你的情况下返回所有div。如果您尝试，那么您可以确保只有要选择的元素（.class5）具有显示块属性。

+-----+---+---+--+--+
|     | A | B |  |  |
+-----+---+---+--+--+
| 288 | 1 | 4 |  |  |
+-----+---+---+--+--+
| 245 | 2 | 3 |  |  |
+-----+---+---+--+--+
| 543 | 3 | 6 |  |  |
+-----+---+---+--+--+
| 867 | 1 | 9 |  |  |
+-----+---+---+--+--+
| 345 | 2 | 7 |  |  |
+-----+---+---+--+--+
| 122 | 3 | 8 |  |  |
+-----+---+---+--+--+
| 233 | 1 | 1 |  |  |
+-----+---+---+--+--+
| 346 | 2 | 6 |  |  |
+-----+---+---+--+--+
| 765 | 3 | 3 |  |  |
+-----+---+---+--+--+

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

7 个答案: