javascript - How to get only the visible elements in jQuery? - Stack Overflow

admin管理员组

文章数量:1331714

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 1, 2015 at 5:53 Tushar 87.2k2121 gold badges163163 silver badges181181 bronze badges asked Aug 18, 2015 at 10:22 StrangerStranger 10.6k1818 gold badges8383 silver badges120120 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: 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