I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
As, the question refers to a single element, this code might be more suitable:
ReplyDelete$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]
Same as twernt's suggestion, but applied to a single element.
You can use the "hidden" and "visible" selectors.
ReplyDelete$('element:hidden')
http://docs.jquery.com/Selectors/hidden
$('element:visible')
http://docs.jquery.com/Selectors/visible
$(element).css('display') == 'none'
ReplyDeleteFunctions don't work with visibility attribute.
Tsvetomir's solution worked for me, couldn't post a comment though. Expanding on it...
ReplyDeleteif( $(element).is(":visible") ) {
// element is visible
}
else {
// element is not visible
}
None of these answers address what I understand to be the question, which is what I was searching for, "how do I handle items that have visibility == hidden?". Neither :visible nor :hidden will handle this, as they are both looking for display per the documentation. As far as I could determine, there is no selector to handle CSS visibility. Here is how I resolved it (standard jQuery selectors, there may be a more condensed syntax):
ReplyDelete$(".item").each(function()
{
if ($(this).css("visibility") == "hidden")
{
// handle non visible state
}
else
{
// handle visible state
}
})
It's worth mentioning (even after all this time), that $(element).is(":visible") works for jQuery 1.4.4, but not for jQuery 1.3.2, under IE8.
ReplyDeleteThis can be tested using Tsvetomirs helpful test snippet. Just remember to change the version of jQuery, to test under each one.
If you already have a reference to a particular element and you want to perform some action on it only if it is visible, or only if it is hidden then you can do do the following. This basically allows you to do the following, but without the 'if' statement :
ReplyDeleteif ($(button).is(":visible")) {
$(button).animate({ width: "toggle" }); // hide button
}
Here's how to do it without the 'if' :
var button = $('#btnUpdate')[0];
if (weWantToHideTheButton)
{
// hide button by sliding to left
$(button).filter(":visible").animate({ width: "toggle" });
}
else {
// show button by sliding to right
$(button).filter(":hidden").animate({ width: "toggle" });
}
This uses the same :visible or :hidden check, but acts on a specific element we already have previously selected (the variable button).
In this case I wanted to do this, but in only one line.
This works for me, and I am using show() and hide() to make my div hidden/visible
ReplyDeleteif( $(this).css("display") == 'none' ){
/* your code here*/
}
else{
/* alternate logic */
}
I use css class .hide { display: none!important; }, for hiding/showing I call .addClass("hide")/.removeClass("hide"), for checking visibility i use .hasClass("hide").
ReplyDeleteIt's simple and clear way to check/hide/show elements, if you don't plan to use .toggle() or .animate() methods.
The :visible selector according to jquery documentation:
ReplyDeleteThey have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.
This is useful in some cases and useless in others, because if you want to check if the element is visible display != none ignoring the parents visibility you will find that doing this .css("display") == 'none' is not only faster but also will return the visibility check correctly.
If you want to check visibility instead of display you should use: .css("visibility") == "hidden".
Also take in consideration the additional jquery notes:
Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").
Also if you are concern about performance you should check this link:
http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance
And use other methods to show and hide elements.
Element could be hidden with "display:none", "visibility:hidden" or "opacity:0". Difference between those methods:
ReplyDeletedisplay:none hides the element and it does not take up any space;
visibility:hidden hides the element, but it still takes up space in the layout;
opacity:0 hides the element as "visibility:hidden" and it still takes up space in the layout; the only difference is that opacity let to do element partly transparent;
How element visibility and jQuery works;
if ($('.target').is(':hidden')) {
$('.target').show();
} else {
$('.target').hide();
}
if ($('.target').is(':visible')) {
$('.target').hide();
} else {
$('.target').show();
}
if ($('.target-visibility').css('visibility') == 'hidden'){
$('.target-visibility').css({visibility: "visible", display: ""});
}else{
$('.target-visibility').css({visibility: "hidden", display: ""});
}
if ($('.target-visibility').css('opacity') == "0"){
$('.target-visibility').css({opacity: "1", display: ""});
}else{
$('.target-visibility').css({opacity: "0", display: ""});
}
Useful jQuery toggle methods:
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
Another answer you should put into consideration is if you are hiding an element, you should use jquery, but instead of actually hiding it, you remove the whole element but you copy its html content and the tag itself into a jquery variable, and then all you need to do is test if there is such a tag on the screen, using the normal if ($('#thetagname')).
ReplyDeleteOne Can simply use hidden or visible attribute like
ReplyDelete$('element:hidden')
$('element:visible')
or You can simplfy the same with IS as following:-
$(element).is(":visible")