Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get only the elements which are not hidden.. Jquery

I need to get only the show() element in jquery foreach loop

In the below code i am getting all the element with class test (i.e) both hidden and shown... but need only shown and not hidden one... how to filter and get that in this line itself?????

$('.element').find('.test').each(function(index, loopelement) {

 }
like image 262
Vinoth Babu Avatar asked Dec 19 '12 09:12

Vinoth Babu


People also ask

How do I get only visible elements in jQuery?

You can simply use the jQuery :visible or :hidden selector to select all the visible or hidden elements in an HTML page. The jQuery :visible selector considered an element visible if they consume space in the document.

How do you check if an element is not hidden jQuery?

You can use the jQuery :visible selector to check whether an element is visible in the layout or not. This selector will also select the elements with visibility: hidden; or opacity: 0; , because they preserve space in the layout even they are not visible to the eye.

Is not visible jQuery?

How to Check an Element is Visible or not using jQuery. You can use .is(':visible') to check whether an element is visible in the layout or not. Elements are considered visible if they consume space in the document.

Is visible selector jQuery?

The :visible selector in jQuery is used to select every element which is currently visible. It works upon the visible elements. The elements that are consuming space in the document are considered visible elements. The height and width of visible elements are larger than 0.


2 Answers

Use the :visible selector:

$('.element').find('.test:visible').each(function(index, loopelement) {
    // do stuff...
});
like image 164
Rory McCrossan Avatar answered Oct 22 '22 13:10

Rory McCrossan


You can use jQuery's :visible selector.

var $visibles = $(".element").find(".test:visible");

But be aware of how jQuery works. From jQuery documentation:

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.

In case this behaviour doesn't fit your use case you could extend jQuery, creating your own custom selector:

$.expr[":"].reallyVisible =
    function reallyVisible (elem) {
        if (elem == null || elem.tagName == null) {
            return false;
        }

        if (elem.tagName.toLowerCase() === "script" || elem.tagName.toLowerCase() === "input" && elem.type === "hidden") {
            return false;
        }

        do {
            if (!isVisible(elem)) {
                return false;
            }

            elem = elem.parentNode;
        } while (elem != null && elem.tagName.toLowerCase() !== "html");

        return true;
    };

function isVisible (elem) {
    var style = elem.style;

    // Depending on your use case
    // you could check the height/width, or if it's in the viewport...
    return !(style.display === "none" || style.opacity === "0" || style.visibility === "hidden");
}

It can be used as any other built-in selector:

$(".element").find(".test:reallyVisible");
$(".element").find(".test:first").is(":reallyVisible");
like image 33
Bruno Avatar answered Oct 22 '22 14:10

Bruno