CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Stranger
Stranger

Reputation: 10611

How to get only the visible elements in jQuery?

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

Here is an external link to JSFiddle: https://jsfiddle.net/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.

Upvotes: 2

Views: 4800

Answers (5)

Tushar
Tushar

Reputation: 87203

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

Upvotes: 5

Eduardo Amador
Eduardo Amador

Reputation: 53

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

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

I hope it helps!

UPDATE Not getting elements with opacity = 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()); });

Upvotes: 1

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48640

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

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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

Upvotes: 1

Lars Graubner
Lars Graubner

Reputation: 837

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
}

Upvotes: 0

Related Questions