admin管理员组

文章数量:1331230

I'm trying to get only the visible elements present in HTML by using jQuery. But the problem is, it is also selecting the elements with "visibility:hidden".

$("p:visible").each(function() {
  var input = $(this);
  console.log(input);
});
<script src=".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>

I'm trying to get only the visible elements present in HTML by using jQuery. But the problem is, it is also selecting the elements with "visibility:hidden".

$("p:visible").each(function() {
  var input = $(this);
  console.log(input);
});
<script src="https://ajax.googleapis./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>

Here is an external link to JSFiddle: https://jsfiddle/udhayakumar/newc91hm/

So, how to get the elements with both display:none, visibility:hidden, opacity:0, etc., Also, if an elements' parent is hidden in one of the above ways, that also should be considered as hidden as it is not going to visible in the page.

Please help.

Share Improve this question edited Sep 1, 2015 at 5:53 Tushar 87.2k21 gold badges163 silver badges181 bronze badges asked Aug 18, 2015 at 10:22 StrangerStranger 10.6k18 gold badges83 silver badges120 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 5

:visible

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

visiblity: hidden does not actually hide the elements from the DOM, the elements are in the DOM occupying space, but those cannot be seen. Unlike the elements which are display: none.

If you inspect the last paragraph https://jsfiddle/udhayakumar/newc91hm/ you'll see that it is :visible(according to the above rules).

Solution

We can use the elements visibility and opacity to check if the element is actually visible. No need to check for display property in the code below, as :visible will check for it.

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

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation. Refference jquery: https://api.jquery./hidden-selector/

You can control it in another way:

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

You could write a jQuery plugin called $.fn.isVisible to determine if an element is visible by your standards.

// 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);
  });
});
<script src="https://ajax.googleapis./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>

You can also use filter() to get the elements you really need.

https://jsfiddle/newc91hm/7/

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

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

I hope it helps!

UPDATE Not getting elements with opacity = 0

https://jsfiddle/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()); });

You could use this as starting point. This does not account hidden parent elements, but you could adapt this to parents.

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

本文标签: javascriptHow to get only the visible elements in jQueryStack Overflow