javascript - मैं जांच कैसे करूं कि jQuery में कोई तत्व छिपा हुआ है या नहीं?

Question

javascript - मैं जांच कैसे करूं कि jQuery में कोई तत्व छिपा हुआ है या नहीं?

15 Answers

कार्यों का उपयोग करके तत्व की दृश्यता को टॉगल करना संभव है। .hide() , .show() या .toggle() ।

यदि कोई तत्व दिखाई देता है या छिपा हुआ है तो आप कैसे परीक्षण करेंगे?

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

उपरोक्त विधि माता-पिता की दृश्यता पर विचार नहीं करती है। माता-पिता को भी विचार करने के लिए, आपको .is(":hidden") या .is(":visible") उपयोग करना चाहिए।

उदाहरण के लिए,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

उपर्युक्त विधि div2 दृश्यमान div2 :visible नहीं। लेकिन उपर्युक्त कई मामलों में उपयोगी हो सकता है, खासकर जब आपको यह पता लगाना चाहिए कि छिपे हुए माता-पिता में कोई त्रुटि div दिखाई दे रही है क्योंकि ऐसी स्थितियों में :visible काम नहीं करेगा।

मैं एक टॉगल तत्व की स्थिति कैसे निर्धारित करूं?

आप यह निर्धारित कर सकते हैं कि कोई तत्व ध्वस्त हो गया है या नहीं :visible और :hidden चयनकर्ताओं का उपयोग करके।

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

यदि आप बस इसकी दृश्यता के आधार पर तत्व पर अभिनय कर रहे हैं, तो आप केवल इसमें शामिल हो सकते हैं :visible या चयनकर्ता अभिव्यक्ति में :hidden । उदाहरण के लिए:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

:visible JQuery प्रलेखन के अनुसार :visible चयनकर्ता:

उनके पास कोई सीएसएस display वैल्यू none ।
वे type="hidden" साथ तत्व तत्व हैं।
उनकी चौड़ाई और ऊंचाई स्पष्ट रूप से 0 पर सेट है।
एक पूर्वज तत्व छुपा हुआ है, इसलिए तत्व पृष्ठ पर नहीं दिखाया गया है।
visibility: hidden तत्व visibility: hidden या opacity: 0 को दिखाई देने के लिए माना जाता है, क्योंकि वे अभी भी लेआउट में स्थान का उपभोग करते हैं।

यह कुछ मामलों में उपयोगी है और दूसरों में बेकार है, क्योंकि यदि आप जांचना चाहते हैं कि तत्व दिखाई दे रहा है ( display != none ), माता-पिता की दृश्यता को अनदेखा करते हुए, आप पाएंगे कि .css("display") == 'none' केवल तेज़ नहीं है, बल्कि दृश्यता जांच को सही तरीके से वापस कर देगा।

यदि आप प्रदर्शन के बजाय दृश्यता की जांच करना चाहते हैं, तो आपको: .css("visibility") == "hidden" उपयोग करना चाहिए।

अतिरिक्त jQuery नोट्स को भी ध्यान में रखें:

क्योंकि :visible एक jQuery एक्सटेंशन है और सीएसएस विनिर्देश का हिस्सा नहीं है, इसका उपयोग करने वाले प्रश्न :visible मूल DOM querySelectorAll() विधि द्वारा प्रदान किए गए प्रदर्शन को बढ़ावा देने का लाभ नहीं उठा सकता है। उपयोग करते समय सर्वोत्तम प्रदर्शन प्राप्त करने के लिए :visible तत्वों का चयन करने के लिए :visible , पहले शुद्ध सीएसएस चयनकर्ता का उपयोग कर तत्वों का चयन करें, फिर .filter(":visible") ।

साथ ही, यदि आप प्रदर्शन के बारे में चिंतित हैं, तो आपको अब जांचना चाहिए कि आप मुझे देखते हैं ... प्रदर्शन दिखाएं / छुपाएं (2010-05-04)। और तत्वों को दिखाने और छिपाने के लिए अन्य विधियों का उपयोग करें।

तत्व दृश्यता और jQuery कैसे काम करता है ;

एक तत्व को display:none साथ छुपाया जा सकता है display:none , visibility:hidden या opacity:0 । उन तरीकों के बीच अंतर:

display:none तत्व छुपाता है, और यह कोई स्थान नहीं लेता है;
visibility:hidden तत्व तत्व छुपाता है, लेकिन यह अभी भी लेआउट में जगह लेता है;

opacity:0 तत्व को "दृश्यता: छुपा" के रूप में छुपाता है, और यह अभी भी लेआउट में स्थान लेता है; केवल अंतर यह है कि अस्पष्टता एक व्यक्ति को आंशिक रूप से पारदर्शी बनाने की अनुमति देती है;

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: ""
  });
}

उपयोगी jQuery टॉगल विधियों:

$('.click').click(function() {
  $('.target').toggle();
});

$('.click').click(function() {
  $('.target').slideToggle();
});

$('.click').click(function() {
  $('.target').fadeToggle();
});

आप सादा जावास्क्रिप्ट का उपयोग करके यह भी कर सकते हैं:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

टिप्पणियाँ:

हर जगह काम करता है
नेस्टेड तत्वों के लिए काम करता है
सीएसएस और इनलाइन शैलियों के लिए काम करता है
एक ढांचे की आवश्यकता नहीं है

एक और जवाब आपको ध्यान में रखना चाहिए यदि आप तत्व को छुपा रहे हैं, तो आपको jQuery उपयोग करना चाहिए, लेकिन वास्तव में इसे छुपाए जाने के बजाय, आप संपूर्ण तत्व को हटाते हैं, लेकिन आप इसकी HTML सामग्री और टैग को एक jQuery चर में कॉपी करते हैं, और उसके बाद if (!$('#thetagname').length) सामान्य रूप से if (!$('#thetagname').length) का उपयोग कर स्क्रीन पर ऐसा कोई टैग है, तो आपको बस इतना करना है कि परीक्षण करें।

ebdiv style="display:none;" सेट किया जाना चाहिए । यह शो और छुपा दोनों के लिए काम करता है:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

यह काम कर सकता है:

expect($("#message_div").css("display")).toBe("none");

यह जांचने के लिए कि क्या यह दिखाई नहीं दे रहा है ! :

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

या निम्नलिखित सैम भी है, जब आप इसे कई बार चाहते हैं तो बेहतर प्रदर्शन करने के लिए एक चर में jQuery चयनकर्ता को सहेजना:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}

आखिरकार, उदाहरणों में से कोई भी मेरे लिए उपयुक्त नहीं है, इसलिए मैंने अपना खुद लिखा।

टेस्ट (इंटरनेट एक्सप्लोरर filter:alpha का कोई समर्थन नहीं filter:alpha ):

ए) जांचें कि दस्तावेज़ छिपा हुआ नहीं है या नहीं

बी) जांचें कि किसी तत्व की शून्य चौड़ाई / ऊंचाई / अस्पष्टता या display:none / visibility:hidden इनलाइन शैलियों में visibility:hidden है

सी) जांचें कि केंद्र (क्योंकि यह हर पिक्सेल / कोने का परीक्षण करने से तेज है) तत्व के अन्य तत्व (और सभी पूर्वजों, उदाहरण: overflow:hidden / स्क्रॉल / एक तत्व पर एक तत्व) द्वारा छिपाया नहीं जाता है या स्क्रीन किनारों

डी) जांचें कि किसी तत्व की शून्य चौड़ाई / ऊंचाई / अस्पष्टता या display:none / दृश्यता: गणना की गई शैलियों में छिपी हुई (सभी पूर्वजों के बीच)

पर परीक्षण किया

एंड्रॉइड 4.4 (मूल ब्राउज़र / क्रोम / फ़ायरफ़ॉक्स), फ़ायरफ़ॉक्स (विंडोज / मैक), क्रोम (विंडोज / मैक), ओपेरा (विंडोज Presto / मैक वेबकिट), इंटरनेट एक्सप्लोरर (इंटरनेट एक्सप्लोरर 5-11 दस्तावेज़ मोड + इंटरनेट एक्सप्लोरर 8 पर आभासी मशीन), सफारी (विंडोज / मैक / आईओएस)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

कैसे इस्तेमाल करे:

is_visible(elem) // boolean

आपको दोनों को जांचना होगा ... प्रदर्शन के साथ-साथ दृश्यता:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

यदि हम $(this).is(":visible")जांचते हैं, तो jQuery स्वचालित रूप से दोनों चीजों के लिए जांच करता है।

क्योंकि Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(जैसा कि jQuery के लिए वर्णित है : दृश्य चयनकर्ता ) - हम जांच सकते हैं कि तत्व वास्तव में इस तरह से दिखाई देता है या नहीं:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

लेकिन क्या होगा यदि तत्व का सीएसएस निम्नलिखित जैसा है?

.element{
    position: absolute;left:-9999;    
}

तो स्टैक ओवरफ़्लो प्रश्न का यह उत्तर कैसे जांचें कि कोई तत्व ऑफ-स्क्रीन पर विचार किया जाना चाहिए या नहीं।

तत्व को UI में दिखाया गया है या नहीं, यह जानने के लिए दृश्यता / प्रदर्शन विशेषताओं की जांच करने के लिए एक फ़ंक्शन बनाया जा सकता है।

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

कामकाजी पहेली

javascript0 · Accepted Answer · 2018-12-04T00:00Z

चूंकि प्रश्न एक तत्व को संदर्भित करता है, इसलिए यह कोड अधिक उपयुक्त हो सकता है:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden");

Twernt के सुझाव के समान, लेकिन एक तत्व पर लागू; और यह jQuery FAQ में अनुशंसित एल्गोरिदम से मेल खाता है

javascript - मैं जांच कैसे करूं कि jQuery में कोई तत्व छिपा हुआ है या नहीं?

Share

Related

Tags