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

dom visibility (20)

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

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

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

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

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

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

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

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

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

तो if एक कथन के बजाय, इस तरह:

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

या अधिक कुशल, लेकिन यहां तक कि uglier:

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

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

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

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

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

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

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

टिप्पणियाँ:

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

उदाहरण:

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

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

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

$(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" एक आईडी है जो एडब्लॉकर ब्लॉक करता है। तो यदि यह दिखाई दे रहा है तो इसे जांचना आप पता लगाने में सक्षम हैं कि विज्ञापन अवरोधक चालू है या नहीं।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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>

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

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