क्या फ़ंक्शन .hide (), .show () या .toggle () का उपयोग करके किसी तत्व की दृश्यता को टॉगल करना संभव है? आप कैसे जांचेंगे कि कोई तत्व दिखाई दे रहा है या छिपा हुआ है?

8271
Philip Morton 7 अक्टूबर 2008, 17:03
55
यह ध्यान देने योग्य है (इतने समय के बाद भी), कि $(element).is(":visible") jQuery 1.4.4 के लिए काम करता है, लेकिन jQuery 1.3.2 के लिए नहीं, इंटरनेट Explorer 8। इसका परीक्षण Tsvetomir Tsonev's सहायक परीक्षण स्निपेट का उपयोग करके किया जा सकता है। . बस हर एक के तहत परीक्षण करने के लिए, jQuery के संस्करण को बदलना याद रखें।
 – 
Reuben
1 फरवरी 2011, 06:57
3
यह एक अलग प्रश्न के बावजूद संबंधित है: Jquery में दिखाई नहीं दे रहा है"> stackoverflow.com/questions/17425543/…
 – 
Mark Schultheiss
22 मार्च 2016, 22:20
यदि आप आभासी सीएसएस तत्व छिपाने में रुचि नहीं रखते हैं, लेकिन उपयोगकर्ता के लिए "व्यूपोर्ट क्षेत्र" में भौतिक दृश्यता में रुचि रखते हैं तो कोसाइडर देखें stackoverflow.com/questions/487073/… और stackoverflow.com/questions/123999/…
 – 
user1742529
2 जिंदा 2021, 16:16

29 जवाब

सबसे बढ़िया उत्तर

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

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

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

यह twernt's सुझाव के समान है। /a>, लेकिन एक ही तत्व पर लागू होता है; और यह सुझाए गए एल्गोरिथम से मेल खाता है jQuery के अक्सर पूछे जाने वाले प्रश्न में।

हम चयनित तत्व को किसी अन्य तत्व, चयनकर्ता या किसी jQuery ऑब्जेक्ट के साथ जांचने के लिए jQuery's is() का उपयोग करते हैं। यह विधि एक मैच खोजने के लिए डीओएम तत्वों के साथ चलती है, जो पारित पैरामीटर को संतुष्ट करती है। यदि कोई मैच है तो यह सच हो जाएगा, अन्यथा झूठी वापसी होगी।

9675
Peter Mortensen 6 मई 2020, 16:38
170
यह समाधान visible=false और display:none; जबकि मोटे का समाधान स्पष्ट रूप से display:none की जांच करने के लिए कोडर्स के इरादे को दर्शाता है; (छिपाने और दिखाने के उल्लेख के माध्यम से कौन सा नियंत्रण display:none visible=true नहीं)
 – 
kralco626
29 पद 2010, 21:30
96
यह सही है, लेकिन :visible यह भी जांच करेगा कि क्या मूल तत्व दिखाई दे रहे हैं, जैसा कि चिबोर्ग ने बताया।
 – 
Tsvetomir Tsonev
6 जिंदा 2011, 15:30
47
आपके पास एक बिंदु है - मैं यह स्पष्ट कर दूंगा कि कोड केवल display संपत्ति के लिए जांचता है। यह देखते हुए कि मूल प्रश्न show() और hide() के लिए है, और उन्होंने display सेट किया है, मेरा उत्तर सही है। वैसे यह IE7 के साथ काम करता है, यहाँ एक परीक्षण स्निपेट है - jsfiddle.net/MWZss ;
 – 
Tsvetomir Tsonev
14 जिंदा 2011, 19:54
55
मैंने वास्तव में पाया कि रिवर्स लॉजिक शब्द बेहतर हैं: !$('selector').is(':hidden'); किसी कारण के लिए। एक कोशिश के लायक।
 – 
Kzqai
5 जिंदा 2012, 19:36
23
यहाँ एक साधारण बेंचमार्क परीक्षण है () regexp के विरुद्ध:jsperf.com/jquery -is-vs-regexp-for-css-visibility. निष्कर्ष: यदि आप प्रदर्शन के लिए बाहर हैं, तो regexp over is() (चूंकि is() वास्तविक तत्व को देखने से पहले सभी छिपे हुए नोड्स की तलाश करता है) का उपयोग करें।
 – 
Max Leske
22 जून 2012, 18:12

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

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

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

// Matches all elements that are visible
$('element:visible')
1518
twernt 8 मार्च 2018, 18:38
68
बस सावधान रहें, इस प्रस्तुति में कुछ अच्छे प्रदर्शन संबंधी सुझाव दिए गए हैं: addyosmani.com/jqprovenperformance
 – 
codecraig
11 जुलाई 2011, 21:05
28
पृष्ठ 21 से 28 पर यह दिखाता है कि अन्य चयनकर्ताओं की तुलना में :hidden या :visible की तुलना कितनी धीमी है। इसे इंगित करने के लिए धन्यवाद।
 – 
Etienne Dupuis
5 जुलाई 2012, 00:12
113
जब आप कुछ तत्वों के साथ काम कर रहे हैं और बहुत कम चल रहा है - यानी मामलों की पूरी तरह से विशाल बहुमत - समय का मुद्दा एक हास्यास्पद मामूली चिंता है। अरे नहीं! इसमें 19 एमएस के बजाय 42 एमएस लगे !!!
 – 
vbullinger
20 फरवरी 2013, 18:56
18
मैं इस चयनकर्ता का उपयोग करके तत्व को बड़े पैमाने पर टॉगल कर रहा हूं। $('element:hidden') मेरे लिए हमेशा सच होता है!
 – 
ZoomIn
9 अगस्त 2013, 11:18
16
हो सकता है कि आप दस्तावेज़ीकरण को फिर से पढ़ना चाहें, :hidden सभी तत्वों पर लागू होता है। type="hidden" के साथ फॉर्म एलिमेंट केवल एक मामला है जो ट्रिगर कर सकता है: छुपा हुआ। बिना ऊंचाई और चौड़ाई वाले तत्व, display: none वाले तत्व, और छिपे हुए पूर्वजों वाले तत्व भी :hidden के रूप में योग्य होंगे।
 – 
Joshua Walsh
15 जिंदा 2016, 07:15
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 काम नहीं करेगा।

994
Peter Mortensen 6 मई 2020, 16:39
133
यह केवल एक तत्व की प्रदर्शन संपत्ति की जांच करता है। :visible विशेषता मूल तत्वों की दृश्यता की भी जाँच करती है।
 – 
chiborg
3 मार्च 2010, 13:10
17
आईई 8 के साथ परीक्षण करते समय यह एकमात्र समाधान है जो मेरे लिए काम करता है।
 – 
evanmcd
13 जिंदा 2012, 22:51
21
हां, लेकिन कभी-कभी आप यही चाहते हैं और मुझे कठिन तरीके से सीखना पड़ा कि "चालाक" jQuery कैसा था ...
 – 
Casey
14 मार्च 2014, 21:56
9
यह प्रश्न का उत्तर देता है, प्रश्न होने के नाते एक ही तत्व के बारे में है और hide(), show() और toggle() फ़ंक्शन का उपयोग करके, हालांकि, जैसा कि अधिकांश ने पहले ही कहा है, हमें hide(), toggle() फ़ंक्शन का उपयोग करना चाहिए। :visible और :hidden छद्म वर्ग।
 – 
Jimmy Knoot
14 अप्रैल 2015, 12:18
2
इस उत्तर का उपयोग तब किया जा सकता है जब कोई तत्व मौजूद हो लेकिन वर्तमान में पृष्ठ पर नहीं है, जैसे कि डिटैच () के बाद।
 – 
atheaos
25 अप्रैल 2017, 19:05

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

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
553
Andrii Abramov 26 जून 2017, 10:12
22
यह उत्तर visibility को शाब्दिक रूप से संभालने के लिए अच्छा है, लेकिन प्रश्न How you would test if an element has been hidden or shown using jQuery? था। JQuery का उपयोग करने का अर्थ है: display संपत्ति।
 – 
MarioDS
12 मई 2013, 02:37
13
visibility: hidden या opacity: 0 वाले तत्वों को दृश्यमान माना जाता है, क्योंकि वे अभी भी लेआउट में जगह का उपभोग करते हैं। पेड्रो रेनहो और jQuery प्रलेखन
 – 
awe
16 अक्टूबर 2013, 13:12
10
आपको नोड के माता-पिता की जांच करने के लिए डीओएम को पार करने की जरूरत है, अन्यथा, यह बेकार है।
 – 
vsync
22 अप्रैल 2014, 23:20

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


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

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

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

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
408
Chris 12 जिंदा 2016, 17:08
6
सोच रहा था कि क्यों कोई जवाब उस मामले का उल्लेख नहीं करता है जब तत्व को दृश्य विंडो से दूर ले जाया जाता है, जैसे top:-1000px... मान लीजिए कि यह एक किनारे का मामला है
 – 
jazzcat
8 मई 2017, 12:34

अक्सर जब जाँच करते हैं कि कुछ दिखाई दे रहा है या नहीं, तो आप तुरंत आगे बढ़ेंगे और उसके साथ कुछ और करेंगे। 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" });
307
ecarrizo 27 अप्रैल 2015, 23:10
25
उदाहरण में उपयोग किए गए स्निपेट में DOM नोड निकालने का कोई कारण नहीं है, और फिर इसे फिर से देखना होगा। बस करने के लिए बेहतर है: var $button = $('#btnUpdate'); और फिर अगर भाव में $(button) के बजाय $button का उपयोग करें। JQuery ऑब्जेक्ट को कैशिंग करने का लाभ है।
 – 
LocalPCGuy
22 अप्रैल 2012, 02:32
2
यहां एक सरल उदाहरण दिया गया है jquerypot.com/…
 – 
Ketan Savaliya
29 अप्रैल 2018, 16:28

तत्व दृश्यता और 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();
    });
    
223
Eugen 31 जुलाई 2017, 01:00
21
visibility:hidden और opacity:0 के बीच एक और अंतर यह है कि तत्व अभी भी opacity:0 के साथ घटनाओं (जैसे क्लिक) का जवाब देगा। मैंने फाइल अपलोड के लिए कस्टम बटन बनाने की ट्रिक सीखी।
 – 
urraka
29 जून 2012, 22:15
2
अगर आप अस्पष्टता के साथ इनपुट छुपाते हैं: 0, यह अभी भी टैब कुंजी के साथ चुना जाता है
 – 
YangombiUmpakati
12 पद 2017, 14:08

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

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
224
webvitaly 15 पद 2015, 00:32

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

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

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

170
Lucas 19 मार्च 2014, 12:15
13
.hasClass('hide') यह जांच नहीं करता है कि माता-पिता का पूर्वज छिपा हुआ है या नहीं (जो इसे छिपा भी देगा)। यदि .closest('.hide').length > 0 की जाँच करके आप इसे सही ढंग से काम करने के लिए प्राप्त कर सकते हैं, लेकिन पहिया को फिर से क्यों बनाया जाए?
 – 
nbrooks
26 सितंबर 2012, 03:57
2
यदि आप एचटीएमएल पर दिखाई देने वाले तत्व को रिटर्न का प्रस्ताव देते हैं, तो मेरा संस्करण रिटर्न देता है यदि तत्व सीधे आपके जावास्क्रिप्ट कोड/व्यू इंजन द्वारा छुपाया गया था। यदि आप जानते हैं कि मूल तत्वों को कभी छिपाया नहीं जाना चाहिए - अधिक सख्त होने और भविष्य की बग को रोकने के लिए .hasClass() का उपयोग करें। यदि आप न केवल दृश्यता की जांच करना चाहते हैं बल्कि तत्व स्थिति भी सेट करना चाहते हैं - .hasClass() का भी उपयोग करें। अन्य मामलों में .निकटतम() बेहतर है।
 – 
Evgeny Levin
2 पद 2012, 00:27
2
आप बस .is(":visible") का उपयोग क्यों नहीं करते?
 – 
dont_trust_me
16 अक्टूबर 2018, 12:43

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

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. ढांचे की आवश्यकता नहीं है

171
Lucas 19 मार्च 2014, 12:15
7
JQuery के लिए थोड़ा अलग काम करता है; यह visibility: hidden को दृश्यमान मानता है।
 – 
alex
20 सितंबर 2012, 08:45
5
(यकीनन बेवकूफ) jQuery व्यवहार की नकल करने के लिए उपरोक्त कोड को बदलना काफी आसान है। . . . . फ़ंक्शन रेंडर किया गया है(ओ){अगर((ओ.नोडटाइप!=1)||(ओ==डॉक्यूमेंट.बॉडी)){रिटर्न ट्रू;}if(o.currentStyle&&o.currentStyle["display"]!="none") {रिटर्न isRendered(o.parentNode);}else if(window.getComputedStyle){if(document.defaultView.getComputedStyle(o, null).getPropertyValue("display")!="none"){return isRendered(o.parentNode) );}}विवरण झूठा है;}
 – 
Matt Brock
26 सितंबर 2012, 17:57
4
निश्चित रूप से, मैं इसे केवल उन उपयोगकर्ताओं के लाभ के लिए जोड़ रहा था जिन्होंने इसका कोड स्कैन किए बिना इसका उपयोग किया था। :)
 – 
alex
27 सितंबर 2012, 01:33

डेमो लिंक

$('#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 का उपयोग करके दृश्यमान है

146
Adder 27 अगस्त 2019, 10:08
2
लेकिन यह लिंक इस फ़ंक्शन का कार्यशील उदाहरण दिखा रहा है। मुझे लगता है कि एक व्यावहारिक उत्तर पाठ के पूरे पृष्ठ पर भारित हो सकता है :)
 – 
Code Spy
25 जिंदा 2013, 10:30

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

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

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

$(element).is(":visible")
141
Peter Mortensen 16 मार्च 2013, 14:04

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

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
139
Community 26 अक्टूबर 2018, 10:33

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

126
Lucas 27 मार्च 2013, 02:12

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
107
Peter Mortensen 6 मई 2020, 16:45

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

expect($("#message_div").css("display")).toBe("none");
94
Lucas 6 मार्च 2013, 10:41
8
यह कौन सी भाषा/बोली/पुस्तकालय है? मैं जे एस में इस वाक्य रचना से परिचित नहीं हूँ ...
 – 
nbrooks
26 सितंबर 2012, 03:31

उदाहरण:

$(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>
78
dippas 16 जुलाई 2017, 16:52

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

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

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

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
70
Peter Mortensen 14 सितंबर 2013, 12:01
2
आपने कैसे निर्धारित किया कि चयनकर्ता को चर में सहेजना वास्तव में तेज़ है?
 – 
Ilia Rostovtsev
21 जून 2013, 01:32
4
नमस्ते @Ilia Rostovtsev jsperf.com/caching-jquery-selectors वहां आप परीक्षण चला सकते हैं। वैसे भी इसे कैश करना अच्छा है ताकि इसे तेजी से एक्सेस किया जा सके
 – 
Matthias Wegtun
21 जून 2013, 10:56
3
यह उपयुक्त है यदि आप एक ही वस्तु को कॉल करने और कॉल करने के बजाय प्रक्रिया के दौरान एक चर का उपयोग करना चाहते हैं।
 – 
Kenneth Palaganas
25 अगस्त 2013, 20:57

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

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


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

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

64
Community 20 जून 2020, 12:12

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

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

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

62
Cameron 13 सितंबर 2016, 17:07

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

परीक्षण (इंटरनेट एक्सप्लोरर का कोई समर्थन नहीं 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
62
Peter Mortensen 6 मई 2020, 16:44

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

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

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

54
Peter Mortensen 19 जुलाई 2014, 19:23

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

$(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>
44
Abrar Jahin 2 मई 2016, 15:59

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

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

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

40
dippas 16 जुलाई 2017, 16:56

क्योंकि 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;
    }
});
38
Andron 20 मार्च 2014, 14:32

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

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

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

36
Community 23 मई 2017, 14:55

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

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
33
cssimsek 6 नवम्बर 2013, 03:32
4
या, ठीक है, बस पूरी शर्त से छुटकारा पाएं और कहें $('elementToToggle').toggle('slow');... :)
 – 
nbrooks
25 पद 2013, 12:53
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
32
dcodesmith 7 पद 2013, 17:51

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

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

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

34
Peter Mortensen 22 नवम्बर 2014, 14:23