jQuery में किसी Element के Hidden होने की जांच कैसे करें

jQuery के साथ काम करते समय, आपको अक्सर यह जांचने की आवश्यकता होगी कि कोई element hidden है या visible। यह ट्यूटोरियल आपको विभिन्न तरीके दिखाएगा जिनसे आप jQuery में elements की visibility status की जांच कर सकते हैं।

:hidden Selector का उपयोग

jQuery का :hidden selector उन elements को select करता है जो hidden हैं। यह सबसे सरल और सबसे अधिक उपयोग किया जाने वाला तरीका है।

// जांचें कि element hidden है या नहीं
if ($('#myElement').is(':hidden')) {
    console.log('Element hidden है');
} else {
    console.log('Element visible है');
}

// सभी hidden elements select करें
var hiddenElements = $('.my-class:hidden');
console.log('Hidden elements की संख्या: ' + hiddenElements.length);

:hidden selector निम्नलिखित elements को match करता है:

• display: none वाले elements
• type="hidden" वाले form elements
• Width और height 0 पर explicitly set किए गए elements
• एक hidden parent element (जो child elements को भी hide करता है)

:visible Selector का उपयोग

इसके विपरीत, आप :visible selector का उपयोग करके जांच सकते हैं कि कोई element visible है या नहीं।

// जांचें कि element visible है या नहीं
if ($('#myElement').is(':visible')) {
    console.log('Element visible है');
} else {
    console.log('Element hidden है');
}

// सभी visible elements select करें
var visibleElements = $('.my-class:visible');
visibleElements.each(function() {
    console.log('Visible element: ' + $(this).attr('id'));
});

CSS Display Property की जांच

आप directly CSS display property की जांच कर सकते हैं यह देखने के लिए कि element hidden है या नहीं।

// Display property की जांच करें
if ($('#myElement').css('display') === 'none') {
    console.log('Element display: none के साथ hidden है');
}

// Function बनाएं visibility जांचने के लिए
function isElementHidden(element) {
    return $(element).css('display') === 'none';
}

if (isElementHidden('#myElement')) {
    $('#myElement').show();
}

Visibility Property की जांच

कुछ elements visibility: hidden के साथ hidden हो सकते हैं, जो space को बनाए रखता है लेकिन element को invisible बनाता है।

// Visibility property की जांच करें
if ($('#myElement').css('visibility') === 'hidden') {
    console.log('Element visibility: hidden के साथ hidden है');
}

// Display और visibility दोनों की जांच करें
function isCompletelyHidden(element) {
    var $el = $(element);
    return $el.css('display') === 'none' || 
           $el.css('visibility') === 'hidden' ||
           $el.css('opacity') === '0';
}

if (isCompletelyHidden('#myElement')) {
    console.log('Element पूरी तरह से hidden है');
}

सर्वोत्तम प्रथाएं

Performance Optimization

// Selectors को cache करें बेहतर performance के लिए
var $element = $('#myElement');

if ($element.is(':hidden')) {
    $element.slideDown();
}

// बार-बार की जांच से बचें
var isHidden = $element.is(':hidden');
if (isHidden) {
    // कुछ करें
}
if (isHidden) {
    // कुछ और करें
}

Event-based Visibility Checking

// जब element की visibility बदलती है तो actions trigger करें
$('#toggleButton').on('click', function() {
    var $target = $('#myElement');
    
    if ($target.is(':visible')) {
        $target.hide();
        $(this).text('Show');
    } else {
        $target.show();
        $(this).text('Hide');
    }
});

Multiple Elements की जांच

// Multiple elements की visibility की जांच करें
function checkMultipleElements() {
    var allHidden = true;
    
    $('.check-visibility').each(function() {
        if ($(this).is(':visible')) {
            allHidden = false;
            return false; // loop से break करें
        }
    });
    
    return allHidden;
}

if (checkMultipleElements()) {
    console.log('सभी elements hidden हैं');
}

Parent Elements की जांच

// जांचें कि कोई parent element hidden है या नहीं
function isHiddenByParent(element) {
    return $(element).parents().filter(':hidden').length > 0;
}

if (isHiddenByParent('#childElement')) {
    console.log('Element एक hidden parent द्वारा hidden है');
}

Practical Example: Toggle Panel

// पूर्ण toggle panel implementation
$(document).ready(function() {
    $('#panelToggle').on('click', function() {
        var $panel = $('#infoPanel');
        var $button = $(this);
        
        if ($panel.is(':hidden')) {
            $panel.slideDown(300);
            $button.html('▲ Hide Panel');
            $button.attr('aria-expanded', 'true');
        } else {
            $panel.slideUp(300);
            $button.html('▼ Show Panel');
            $button.attr('aria-expanded', 'false');
        }
    });
    
    // Initial state set करें
    if ($('#infoPanel').is(':hidden')) {
        $('#panelToggle').attr('aria-expanded', 'false');
    }
});

मुख्य बातें:

• :hidden और :visible selectors का उपयोग करें quick checks के लिए
• Performance के लिए jQuery objects को cache करें
• याद रखें कि :hidden display: none, zero dimensions, और hidden parents को match करता है
• Accessibility के लिए ARIA attributes update करना न भूलें
• CSS properties की directly जांच करें अधिक specific checks के लिए

इन techniques के साथ, आप अपने jQuery applications में effectively elements की visibility को handle कर सकते हैं और responsive user interfaces बना सकते हैं।