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


Answers

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

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

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

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

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

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




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

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

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




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

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



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

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

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

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




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

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

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

var $book = $('#book')

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



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

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



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

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

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




अक्सर जब कुछ दिखता है या नहीं, तो आप तत्काल आगे बढ़ने जा रहे हैं और इसके साथ कुछ और कर सकते हैं। 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" });



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

टेस्ट (इंटरनेट एक्सप्लोरर 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



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

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



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



एक तत्व का परीक्षण करते समय :hidden 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 के साथ वर्णित व्यवहार बदल जाएगा! तत्वों को दृश्यमान माना जाएगा यदि उनके पास शून्य चौड़ाई और / या ऊंचाई सहित कोई लेआउट बॉक्स हैं।

JQuery 3.0.0-alpha1 के साथ JSFiddle:

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

उसी जेएस के पास यह आउटपुट होगा:

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



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

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

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

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



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

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




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

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



Related