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

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

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

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

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

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

इनमें से कोई भी उत्तर उस प्रश्न को संबोधित नहीं करता है जिसे मैं समझता हूं, जिसे मैं खोज रहा था, "मैं उन वस्तुओं को कैसे संभाल सकता हूं जिनमें visibility: hidden हैं?"। न तो :visible और न ही :hidden इसे संभालेंगे, क्योंकि वे दोनों दस्तावेज़ के अनुसार प्रदर्शन की तलाश में हैं। जहां तक ​​​​मैं निर्धारित कर सकता था, सीएसएस दृश्यता को संभालने के लिए कोई चयनकर्ता नहीं है। यहां बताया गया है कि मैंने इसे कैसे हल किया (मानक jQuery चयनकर्ता, एक अधिक संघनित वाक्यविन्यास हो सकता है):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

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

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

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

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

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

अक्सर जब जाँच करते हैं कि कुछ दिखाई दे रहा है या नहीं, तो आप तुरंत आगे बढ़ेंगे और उसके साथ कुछ और करेंगे। jQuery चेनिंग इसे आसान बनाता है।

इसलिए यदि आपके पास एक चयनकर्ता है और आप उस पर कुछ क्रिया करना चाहते हैं, यदि वह दृश्यमान या छिपी हुई है, तो आप filter(":visible") या filter(":hidden") का उपयोग कर सकते हैं और उसके बाद उस क्रिया के साथ श्रृंखलाबद्ध कर सकते हैं जिसे आप करना चाहते हैं।

तो if स्टेटमेंट के बजाय, इस तरह:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

या अधिक कुशल, लेकिन इससे भी बदतर:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

आप यह सब एक पंक्ति में कर सकते हैं:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

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

एक तत्व को 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();
  });
  

यह मेरे लिए काम करता है, और मैं अपने div को छुपा/दृश्यमान बनाने के लिए show() और hide() का उपयोग कर रहा हूं:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

मैं सीएसएस वर्ग .hide { display: none!important; } का उपयोग करूंगा।

छिपाने/दिखाने के लिए, मैं .addClass("hide")/.removeClass("hide") को कॉल करता हूं। दृश्यता जांचने के लिए, मैं .hasClass("hide") का उपयोग करता हूं।

यदि आप .toggle() या .animate() विधियों का उपयोग करने की योजना नहीं बनाते हैं, तो यह तत्वों को जांचने/छिपाने/दिखाने का एक सरल और स्पष्ट तरीका है।

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

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

टिप्पणियाँ:

1. हर जगह काम करता है

2. नेस्टेड तत्वों के लिए काम करता है

3. सीएसएस और इनलाइन शैलियों के लिए काम करता है

4. ढांचे की आवश्यकता नहीं है

डेमो लिंक

$('#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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

स्रोत:

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

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

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

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

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

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

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

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

JQuery में :hidden चयनकर्ता के विरुद्ध किसी तत्व का परीक्षण करते समय यह माना जाना चाहिए कि एक पूर्ण स्थिति वाले तत्व को छिपे हुए के रूप में पहचाना जा सकता है, हालांकि उनके बच्चे तत्व दिखाई दे रहे हैं।

यह पहली जगह में कुछ हद तक सहज ज्ञान युक्त लगता है - हालांकि jQuery दस्तावेज पर नजदीकी नजर डालने से प्रासंगिक जानकारी मिलती है:

तत्वों को कई कारणों से छिपा हुआ माना जा सकता है: [...] उनकी चौड़ाई और ऊंचाई स्पष्ट रूप से 0 पर सेट है। [...]

तो यह वास्तव में तत्व के लिए बॉक्स-मॉडल और गणना शैली के संबंध में समझ में आता है। भले ही चौड़ाई और ऊंचाई को स्पष्ट रूप से से 0 पर सेट न किया गया हो, उन्हें अस्पष्ट रूप से सेट किया जा सकता है।

निम्नलिखित उदाहरण पर एक नज़र डालें:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

jQuery 3.x के लिए अपडेट:

JQuery 3 के साथ वर्णित व्यवहार बदल जाएगा! तत्वों को दृश्यमान माना जाएगा यदि उनके पास कोई लेआउट बॉक्स है, जिसमें शून्य चौड़ाई और/या ऊंचाई शामिल है।

JSFiddle jQuery 3.0.0-alpha1 के साथ:

http://jsfiddle.net/pM2q3/7/

फिर उसी जावास्क्रिप्ट कोड में यह आउटपुट होगा:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

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

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

उदाहरण:

$(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>

यह देखने के लिए कि क्या यह दिखाई नहीं दे रहा है, मैं ! का उपयोग करता हूं:

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

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

var $book = $('#book')

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

क्लास टॉगलिंग का प्रयोग करें, स्टाइल एडिटिंग का नहीं। . .

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

जावास्क्रिप्ट सर्वोत्तम अभ्यास और अनुकूलन

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

• अपनी Javascript को गति दें (यूट्यूब)

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

$(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>

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

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

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

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

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

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

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

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

एंड्रॉइड 4.4 (मूल ब्राउज़र/क्रोम/फ़ायरफ़ॉक्स), फ़ायरफ़ॉक्स (विंडोज़/मैक), क्रोम (विंडोज़/मैक), ओपेरा (विंडोज़ Presto/Mac WebKit), इंटरनेट एक्सप्लोरर (इंटरनेट एक्सप्लोरर 5-11 दस्तावेज़ मोड + वर्चुअल मशीन पर इंटरनेट एक्सप्लोरर 8), और Safari (Windows/Mac/iOS)।

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 स्वचालित रूप से दोनों चीजों की जांच करता है।

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

$(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 (this.hidden === false) {
    // Your code
}

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

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

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

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

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

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

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

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

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

वर्किंग फिडेल