javascript - 如何使用 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() 返回一个 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>

引用文献:

• filter() .
• find() .
• is() .