如何只获取jQuery中的可见元素？

Question

我试图通过使用jQuery仅获取HTML中存在的可见元素.但问题是,它还选择了"visibility:hidden"元素.

$("p:visible").each(function() {
  var input = $(this);
  console.log(input);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Paragraph1 content goes here</p>
<p>Paragraph2 content goes here</p>
<p id="myParagraph1" style="display:none;">Some text</p>
<p id="myParagraph2" style="visibility:hidden;">Some text</p>
<p id="myParagraph3" style="opacity:0;">Some text</p>

这是JSFiddle的外部链接:https://jsfiddle.net/udhayakumar/newc91hm/

那么,如何获得元素既display:none,visibility:hidden,opacity:0等,另外,如果一个元素的父是隐藏在上述的方式,为隐藏,因为它是不会看到的页面,也应考虑之一.

请帮忙.

Answer 1

:可见

如果元素占用文档中的空间,则认为元素是可见的.可见元素的宽度或高度大于零.

具有可见性的元素:隐藏或不透明度:0被认为是可见的,因为它们仍然占用布局中的空间.

visiblity: hidden实际上并没有隐藏DOM中的元素,元素位于DOM占用空间中,但是这些元素无法看到.不同于那些元素display: none.

如果您检查最后一段https://jsfiddle.net/udhayakumar/newc91hm/,您会看到它:visible(根据上述规则).

解

我们可以使用元素visibility并opacity检查元素是否实际可见.无需display在下面的代码中检查属性,:visible并检查它.

// Use :visible here to filter elements that are display:none
$('p:visible').each(function() {
  if ($(this).css('visibility') !== 'hidden' && $(this).css('opacity') != 0) {
    // visible elements
    console.log($(this).text());
  } else {
    // Element is actually invisible
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Paragraph1 content goes here</p>
<p>Paragraph2 content goes here</p>
<p id="myParagraph1" style="display:none;">Some text 1</p>
<p id="myParagraph2" style="visibility:hidden;">Some text 2</p>
<p id="myParagraph2" style="opacity:0;">Some text 3</p>