Question

我试图通过使用jQuery来获取HTML中仅存在的可见元素。但问题是，它还选择了具有＆＃34; visibility：hidden＆＃34;。

的元素

＆＃13;

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

＆＃13;

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

＆＃13;

以下是JSFiddle的外部链接：https://jsfiddle.net/udhayakumar/newc91hm/

那么，如何使用display:none，visibility:hidden，opacity:0等来获取元素。另外，如果元素是＆＃39; parent隐藏在上述方式之一中，也应该被视为隐藏，因为它不会在页面中显示。

请帮忙。

Answer 1

:visible

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

可见性：隐藏或不透明度：0 的元素被视为可见，因为它们仍占用布局中的空间。

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

如果你检查最后一段https://jsfiddle.net/udhayakumar/newc91hm/，你会发现它是:visible（根据上述规则）。

<强>解决方案

我们可以使用元素visibility和opacity来检查元素是否实际可见。无需在下面的代码中检查display属性，因为:visible会检查它。

＆＃13;

// 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
  }
});

＆＃13;

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

＆＃13;

Answer 2

具有可见性的元素：隐藏或不透明度：0被认为是可见的，因为它们仍然占用布局中的空间。在隐藏元素的动画期间，该元素在动画结束前被视为可见。参考jquery：https://api.jquery.com/hidden-selector/

您可以通过其他方式控制它：

$("p:visible").each(function () {
    if($(this).css('visibility') == "hidden") {
        console.log($(this));
    }
    var input = $(this);
    console.log(input);
});

Answer 3

您还可以使用filter（）来获取您真正需要的元素。

https://jsfiddle.net/newc91hm/7/

var visible = $('p:visible').filter(function() {
    return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
});

visible.each(function() {
    console.log($(this).html()); 
});

我希望它有所帮助！

<强>更新没有获得具有不透明度的元素= 0

https://jsfiddle.net/newc91hm/13/

var visible = $('p:visible').filter(function () {
    return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none' || $(this).css('opacity') == 0 ); 
});

visible.each(function () {
    console.log($(this).html()); });

Answer 4

您可以编写一个名为Stream One { } Stream Two { Stream Three { } }的jQuery插件，以确定您的标准是否可以看到某个元素。

$.fn.isVisible

// jQuery plugin to check for element visibility.
$.fn.isVisible = function() {
  return this.not(':hidden') &&
         this.css('visibility') !== 'hidden' &&
         this.css('opacity') != 0;
}

$(function() {
  // Filter each paragraph that is visible.
  $('p').filter(function() {
    return $(this).isVisible();
  }).each(function() {
    var item = $(this);
    console.log(item);
  });
});

Answer 5

您可以将此作为起点。这不会考虑隐藏的父元素，但您可以将其调整为父母。

if ($elem.is(":visible") || $elem.css("visibility") == "visible" || $elem.css("opacity") == 1) {
    // do stuff
}

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

5 个答案: