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

dom visibility (25)

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

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

Answers

बस एक बूलियन मान की जांच करके दृश्यता की जांच करें, जैसे:

if (this.hidden === false) {
    // Your code
}

मैंने प्रत्येक फंक्शन के लिए इस कोड का इस्तेमाल किया। अन्यथा आप is(':visible')किसी तत्व की दृश्यता की जांच के लिए उपयोग कर सकते हैं ।

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

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

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

तत्व दृश्यता और 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();
});

उदाहरण:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

आप hidden चयनकर्ता का उपयोग कर सकते हैं:

// Matches all elements that are hidden
$('element:hidden')

और visible चयनकर्ता:

// Matches all elements that are visible
$('element: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

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

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

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

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

स्रोत:

ब्लॉगर प्लग एन प्ले - jQuery टूल्स और विजेट्स: एलिमेंट छिपा हुआ है या jQuery का उपयोग करके दृश्यमान है या नहीं

jsFiddle:

JSFiddle - ipsjolly - k4WWj

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

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

कोई भी hidden या visible विशेषता का उपयोग कर सकता है, जैसे:

$('element:hidden')
$('element:visible')

या आप इसे निम्नानुसार सरल बना सकते हैं।

$(element).is(":visible")

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

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;
}

टिप्पणियाँ:

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

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

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

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

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

एडब्लॉकर के लिए दृश्यमान चेक का उपयोग करने का उदाहरण सक्रिय है:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" एक आईडी है जो एडब्लॉकर ब्लॉक करता है। तो यदि यह दिखाई दे रहा है तो इसे जांचना आप पता लगाने में सक्षम हैं कि विज्ञापन अवरोधक चालू है या नहीं।

इसके अलावा तत्व की स्थिति की जांच करने के लिए एक टर्नरी सशर्त अभिव्यक्ति है और फिर इसे टॉगल करने के लिए:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

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

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

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

var $book = $('#book')

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

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

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

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

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

क्योंकि 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;
    }
});

: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)। और तत्वों को दिखाने और छिपाने के लिए अन्य विधियों का उपयोग करें।

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

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

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

शायद आप ऐसा कुछ कर सकते हैं

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

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 काम नहीं करेगा।

क्लास टॉगलिंग का प्रयोग करें, शैली संपादन नहीं। । ।

"छिपाने" तत्वों के लिए नामित कक्षाओं का उपयोग करना आसान है और यह भी सबसे कुशल तरीकों में से एक है। 'कोई नहीं' की एक Display शैली के साथ एक वर्ग 'छुपा' को टॉगल करना उस शैली को सीधे संपादित करने से तेज़ प्रदर्शन करेगा। मैंने स्टैक ओवरफ़्लो प्रश्न में इस सुंदरता में से कुछ को समझाया है, उसी तत्व में दो तत्वों को दृश्यमान / छुपाएं ।

जावास्क्रिप्ट सर्वोत्तम प्रथाओं और अनुकूलन

Google फ्रंट-एंड इंजीनियर निकोलस जाकस द्वारा Google टेक टॉक का वास्तव में प्रबुद्ध वीडियो यहां दिया गया है:

अपने जावास्क्रिप्ट को गति दें (यूट्यूब)

चूंकि सवाल बहुत लोकप्रिय है, मैंने सोचा कि मैं कोड में थोड़ा आधुनिक स्वाद जोड़ सकता हूं।

// const           : creates an immutable constant
const allLinks   = document.getElementsByTagName("a");
// [].reduce.call  : gives access to the reduce method on a HTMLCollection
// () => {}        : ES6 arrow function
const foundLinks = [].reduce.call(allLinks, (sum, link) => {
     // bitwise OR : converts the boolean value to a number
     return sum + (link.classList.contains("title") | 0);
}, 0);

// template literal
console.log(`Found ${foundLinks || "no"} title class`);

बीटीडब्लू, सही जवाब गलत वर्तनी String.contains या गैर-मानक String.contains । बाहरी पुस्तकालय लोड करना (विशेष रूप से यदि कोड शुद्ध जावास्क्रिप्ट में लिखा गया है) या String.prototype साथ String.prototype या नियमित अभिव्यक्ति का उपयोग करना थोड़ा अधिक है।