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


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

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


6705
2017-10-07 13:03


मूल


यह उल्लेखनीय है (इस बार भी बाद में), वह $(element).is(":visible") jQuery 1.4.4 के लिए काम करता है, लेकिन jQuery 1.3.2 के लिए नहीं, नीचे इंटरनेट & nbsp; एक्सप्लोरर & nbsp; 8। इसका उपयोग करके परीक्षण किया जा सकता है Tsvetomir Tsonev के सहायक परीक्षण स्निपेट। बस एक के तहत परीक्षण करने के लिए, jQuery के संस्करण को बदलने के लिए याद रखें। - Reuben
यह एक अलग सवाल है हालांकि संबंधित है: stackoverflow.com/questions/17425543/... - Mark Schultheiss
छिपी हुई आपकी परिभाषा क्या है? - fabspro


जवाब:


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

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

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

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


8294
2017-10-07 13:30



यह समाधान दहन को प्रोत्साहित करने के लिए प्रतीत होता है visible=false तथा display:none; जबकि मोटे का समाधान स्पष्ट रूप से कोडर के इरादे को जांचने के लिए स्पष्ट करता है display:none; (छिपाने के संदर्भ के माध्यम से और कौन सा नियंत्रण दिखाओ display:none नहीं visible=true) - kralco626
यह सही है, लेकिन :visible यह भी जांच करेगा कि क्या पैरेंट तत्व दिखाई दे रहे हैं, क्योंकि चिबॉर्ग ने बताया। - Tsvetomir Tsonev
आपके पास एक बिंदु है - मैं इसे स्पष्ट कर दूंगा कि कोड केवल जांच के लिए है display संपत्ति। यह देखते हुए कि मूल प्रश्न है show() तथा hide(), और वे सेट display, मेरा जवाब सही है। जिस तरह से यह आईई 7 के साथ काम करता है, यहां एक टेस्ट स्निपेट है - jsfiddle.net/MWZss ; - Tsvetomir Tsonev
मुझे वास्तव में पता चला कि रिवर्स तर्क शब्द बेहतर हैं:! $ ('चयनकर्ता')। (': छुपा') है; किसी कारण के लिए। एक कोशिश के काबिल है। - Kzqai
Regexp के खिलाफ यहां एक सरल बेंचमार्क परीक्षण है ():jsperf.com/jquery-is-vs-regexp-for-css-visibility। निष्कर्ष: यदि आप प्रदर्शन के लिए बाहर हैं, तो regexp का उपयोग करें () (क्योंकि है () वास्तविक तत्व को देखने से पहले सभी छुपे हुए नोड्स को देखता है)। - Max Leske


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

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

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

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

1264
2017-10-07 13:16



बस सावधान रहें, इस प्रस्तुति में कुछ अच्छे प्रदर्शन संबंधी सुझाव हैं: addyosmani.com/jqprovenperformance - codecraig
पेज 21 से 28 पर यह दिखाता है कि कितना धीमा: छुपा हुआ या दृश्यमान अन्य चयनकर्ताओं से तुलना की जाती है। इसे इंगित करने के लिए धन्यवाद। - Etienne Dupuis
जब आप कुछ तत्वों से निपट रहे हैं और बहुत कम चल रहा है - यानी अत्याधुनिक रूप से मामूली प्रमुखता - समय मुद्दा एक हास्यास्पद मामूली चिंता है। अरे नहीं! इसमें 1 9 एमएस की बजाय 42 एमएस लग गए !!! - vbullinger
मैं इस चयनकर्ता का उपयोग करके आम तौर पर तत्व को टॉगल कर रहा हूं। $ ('तत्व: छुपा') हमेशा मेरे लिए सच है! - ZoomIn
@cwingrav आप दस्तावेज़ को फिर से पढ़ना चाहेंगे,: छुपा सभी तत्वों पर लागू होता है। के साथ फार्म तत्व type="hidden" केवल एक मामला है जो ट्रिगर कर सकता है: छुपा हुआ। बिना ऊंचाई और चौड़ाई वाले तत्व, तत्व display: none, और छिपे पूर्वजों के साथ तत्व भी योग्य होंगे: छुपा। - Joshua Walsh


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


784
2017-10-07 13:09



यह केवल एक तत्व की प्रदर्शन संपत्ति के लिए जांचता है। : दृश्य विशेषता अभिभावक तत्वों की दृश्यता भी जांचती है। - chiborg
आईई 8 के साथ परीक्षण करते समय यह एकमात्र समाधान है जो मेरे लिए काम करता है। - evanmcd
यह मेरी समस्या का समाधान नहीं है लेकिन इस विधि ने मुझे अपनी समस्या के लिए संपत्ति के खिलाफ जांच के लिए एक फिक्स की पहचान करने में मदद की। - dchayka
@chiborg हां, लेकिन कभी-कभी आप यही चाहते हैं और मुझे कठिन तरीका सीखना था कि "चालाक" jQuery कैसे था ... - Casey
यह प्रश्न का उत्तर देता है, सवाल यह है कि सवाल एक तत्व के बारे में है और इसका उपयोग कर रहा है hide(), show() तथा toggle() हालांकि, जैसा कि अधिकांश ने पहले ही कहा है, हमें इसका उपयोग करना चाहिए :visible तथा :hidden छद्म कक्षाएं। - Jimmy Knoot


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

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

451
2018-03-24 18:44



यह जवाब संभालने के लिए अच्छा है visibility सचमुच, लेकिन सवाल था How you would test if an element has been hidden or shown using jQuery?। JQuery का उपयोग करना मतलब है: display संपत्ति। - MarioDS
के साथ तत्व visibility: hidden या opacity: 0 माना जाता है, क्योंकि वे अभी भी लेआउट में जगह का उपभोग करते हैं। देख द्वारा जवाब पेड्रो रेन्हो तथा jQuery दस्तावेज पर :visible चयनकर्ता। - awe
नोड के माता-पिता की जांच करने के लिए आपको डीओएम को पार करने की जरूरत है, अन्यथा, यह बेकार है। - vsync
यदि आप तत्व को छुपाते हैं तो यह काम नहीं करेगा। hide ()। - user3197818


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


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

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

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

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

322
2018-01-13 21:13



यह सोचकर कि कोई जवाब उस मामले का उल्लेख क्यों नहीं करता जब तत्व दृश्य विंडो से दूर हो जाता है top:-1000px... मान लीजिए कि यह एक एज-केस है - jazzcat


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

236
2017-07-25 10:21



उदाहरण में इस्तेमाल किए गए स्निपेट में डोम नोड निकालने का कोई कारण नहीं है, और उसके बाद इसे फिर से देखना होगा। बस करने के लिए बेहतर: var $ बटन = $ ('# btnUpdate'); और फिर यदि अभिव्यक्तियों में $ (बटन) के बजाय $ बटन का उपयोग करें। JQuery ऑब्जेक्ट कैशिंग का लाभ है। - LocalPCGuy
यहाँ एक साधारण उदाहरण है jquerypot.com/... - Ketan Savaliya


:visible के अनुसार चयनकर्ता jQuery दस्तावेज:

  • उनके पास एक सीएसएस है display का मूल्य none
  • वे तत्व तत्व हैं type="hidden"
  • उनकी चौड़ाई और ऊंचाई स्पष्ट रूप से 0 पर सेट है।
  • एक पूर्वज तत्व छुपा हुआ है, इसलिए तत्व पृष्ठ पर नहीं दिखाया गया है।

के साथ तत्व visibility: hidden या opacity: 0 माना जाता है, क्योंकि वे अभी भी लेआउट में जगह का उपभोग करते हैं।

यह कुछ मामलों में उपयोगी है और दूसरों में बेकार है, क्योंकि यदि आप यह देखना चाहते हैं कि तत्व दिखाई दे रहा है या नहीं (display != none), माता-पिता की दृश्यता को अनदेखा करते हुए, आप यह कर पाएंगे .css("display") == 'none' न केवल तेज़ है, बल्कि दृश्यता जांच को भी सही तरीके से वापस कर देगा।

यदि आप प्रदर्शन के बजाय दृश्यता की जांच करना चाहते हैं, तो आपको इसका उपयोग करना चाहिए: .css("visibility") == "hidden"

यह भी ध्यान में रखें अतिरिक्त jQuery नोट्स:

इसलिये :visible एक jQuery एक्सटेंशन है और सीएसएस विनिर्देश का हिस्सा नहीं है, इसका उपयोग कर क्वेरी :visible देशी डोम द्वारा प्रदान किए गए प्रदर्शन को बढ़ावा देने का लाभ नहीं उठा सकते हैं querySelectorAll() तरीका। उपयोग करते समय सर्वश्रेष्ठ प्रदर्शन प्राप्त करने के लिए :visible तत्वों का चयन करने के लिए, पहले शुद्ध सीएसएस चयनकर्ता का उपयोग कर तत्वों का चयन करें, फिर उपयोग करें .filter(":visible")

इसके अलावा, यदि आप प्रदर्शन के बारे में चिंतित हैं, तो आपको जांच करनी चाहिए अब आप मुझे देखते हैं ... प्रदर्शन दिखाएं / छिपाएं (2010-05-04)। और तत्वों को दिखाने और छिपाने के लिए अन्य विधियों का उपयोग करें।


188
2017-11-25 09:16





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

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

170
2017-07-06 20:19





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

166
2018-04-24 21:04



के बीच एक और अंतर visibility:hidden तथा opacity:0 यह है कि तत्व अभी भी घटनाओं (जैसे क्लिक) का जवाब देगा opacity:0। मैंने सीखा कि फ़ाइल अपलोड के लिए एक कस्टम बटन बनाने की चाल है। - urraka
अगर आप अस्पष्टता के साथ इनपुट छिपाते हैं: 0, यह अभी भी टैब कुंजी के साथ चुना जाता है - YangombiUmpakati