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 badges5 Answers
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
版权声明:本文标题:javascript - How to get only the visible elements in jQuery? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742245144a2439085.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论