अगर jQuery में कोई तत्व छिपा है तो मैं कैसे जांच करूं?

Question

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

अगर एक तत्व है आप कैसे परीक्षण होगा visibleया hidden?

Comments

यह ध्यान देने योग्य बात है (इस समय के बाद भी), जो इंटरनेट और इंटरनेट एक्सप्लोरर & nbsp; 8 के$(element).is(":visible") तहत jQuery 1.4.4 के लिए काम करता है, लेकिन jQuery के 1.3.2 के लिए नहीं । यह Tsvetomir Tsonev के सहायक परीक्षण स्निपेट का उपयोग करके परीक्षण किया जा सकता है । बस एक के तहत परीक्षण करने के लिए, jQuery के संस्करण को बदलने के लिए याद रखें।

— रूबेन

यह हालांकि एक अलग सवाल है: stackoverflow.com/questions/17425543/…

— मार्क शुल्त्स

Answer 1

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

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

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

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

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

Comments

यह समाधान की confustion प्रोत्साहित करने के लिए प्रतीत होता है visible=falseऔर display:none; जबकि Mote का समाधान स्पष्ट रूप से कोडर्स को जांचने के इरादे को दिखाता है display:none; (छिपाने और दिखाने के माध्यम से जो नियंत्रण display:noneनहीं बताते हैं visible=true)

— kralco626

यह सही है, लेकिन :visibleयह भी जांच करेगा कि मूल तत्व दिखाई दे रहे हैं या नहीं, जैसा कि चिबोर्ग ने बताया है।

— त्सविटोमिर Tsonev

आपके पास एक बिंदु है - मैं यह स्पष्ट कर दूंगा कि कोड केवल displayसंपत्ति की जांच करता है। यह देखते हुए कि मूल प्रश्न show()और है hide(), और उन्होंने सेट किया है display, मेरा उत्तर सही है। वैसे यह IE7 के साथ काम करता है, यहाँ एक परीक्षण स्निपेट है - jsfiddle.net/MWZss ;

— त्सविटोमिर Tsonev

मैंने वास्तव में पाया कि रिवर्स लॉजिक शब्द बेहतर हैं:! $ ('चयनकर्ता')। (': छिपा हुआ'); किसी कारण के लिए। एक कोशिश के काबिल है।

— Kzqai

यहाँ एक सरल बेंचमार्क परीक्षण है () regexp के खिलाफ: jsperf.com/jquery-is-vs-regexp-for-css-visibility । निष्कर्ष: यदि आप प्रदर्शन के लिए बाहर हैं, तो regexp का उपयोग करें () (के बाद से () वास्तविक तत्व को देखने से पहले सभी छिपे हुए नोड्स के लिए दिखता है)।

— मैक्स लेस्के

Answer 2

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

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

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

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

Comments

बस सावधान रहें, इस प्रस्तुति में कुछ अच्छे प्रदर्शन से संबंधित सुझाव दिए गए हैं: addyosmani.com/jqprovenperformance

— codecraig

21 से 28 पेजों पर यह पता चलता है कि अन्य चयनकर्ताओं की तुलना में कितना धीमा: छिपा हुआ या दृश्यमान है। यह इंगित करने के लिए धन्यवाद।

— एटिएन ड्यूपुल्स

जब आप तत्वों के एक जोड़े के साथ काम कर रहे हैं और बहुत कम चल रहा है - यानी CASES का पूरी तरह से विशाल समय - समय मुद्दा एक हास्यास्पद मामूली चिंता का विषय है। अरे नहीं! इसमें 19 ms की जगह 42 ms लग गए !!!

— vbullinger 14

मैं इस चयनकर्ता का उपयोग करते हुए मूल रूप से टॉगल कर रहा हूं। $ ('तत्व: छिपा हुआ') मेरे लिए हमेशा सत्य है!

— ज़ूम इन

@cwingrav आप दस्तावेज़ को फिर से पढ़ना चाह सकते हैं: सभी तत्वों पर छिपा हुआ लागू होता है। फॉर्म के साथ तत्व type="hidden"सिर्फ एक मामला है जो ट्रिगर कर सकता है: छिपा हुआ। बिना ऊँचाई और चौड़ाई वाले तत्व display: none, छिपे हुए पूर्वजों के साथ तत्व और तत्व भी इस प्रकार होंगे: छिपे हुए।

— जोशुआ वॉल्श

Answer 3

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

Comments

यह केवल एक एकल तत्व की प्रदर्शन संपत्ति के लिए जाँच करता है। : दृश्यमान विशेषता भी मूल तत्वों की दृश्यता की जांच करती है।

— चिबॉर्ग

यह एकमात्र समाधान है जो मेरे लिए काम करता है जब IE 8. के ​​साथ परीक्षण किया गया था

— evanmcd

@chiborg हाँ, लेकिन कभी-कभी यही आप चाहते हैं और मुझे यह कठिन तरीका सीखना था कि "चतुर" jQuery कैसे था ...

— केसी

यह प्रश्न का उत्तर देता है, यह सवाल एक तत्व के बारे में है और इसका उपयोग करके hide(), show()और toggle()कार्य करता है, हालांकि, जैसा कि अधिकांश पहले ही कह चुके हैं, हमें :visibleऔर :hiddenछद्म वर्गों का उपयोग करना चाहिए ।

— जिमी नॉट

इस उत्तर का उपयोग तब किया जा सकता है जब कोई तत्व मौजूद होता है, लेकिन वर्तमान में पृष्ठ पर नहीं है, जैसे कि अलग होने के बाद ()।

— अथियाओस

Answer 4

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

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

Comments

यह उत्तर visibilityशाब्दिक रूप से संभालना अच्छा है , लेकिन सवाल यह था How you would test if an element has been hidden or shown using jQuery?। JQuery का उपयोग करने का अर्थ है: displayसंपत्ति।

— मारियोडीएस

तत्वों के साथ visibility: hiddenया opacity: 0उन्हें दृश्यमान माना जाता है, क्योंकि वे अभी भी लेआउट में स्थान का उपभोग करते हैं। चयनकर्ता पर पेड्रो रेनहो और jQuery प्रलेखन द्वारा उत्तर देखें । :visible

— खौफ

आपको नोड के माता-पिता की जांच करने के लिए DOM को आगे बढ़ाने की आवश्यकता है, अन्यथा, यह बेकार है।

— विस्कॉन्सिन

Answer 5

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

---

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

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

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

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

Comments

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

— jazzcat

Answer 6

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

इसलिए यदि आपके पास एक चयनकर्ता है और आप उस पर कुछ कार्रवाई करना चाहते हैं यदि केवल दिखाई या छिपा हुआ है, तो आप इसे उस क्रिया के साथ उपयोग 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" });

Comments

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

— लोकलपीसीगयूट २१'१२

यहाँ एक सरल उदाहरण है jquerypot.com/…

— केतन

Answer 7

:visibleचयनकर्ता के अनुसार jQuery प्रलेखन :

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

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

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

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

अतिरिक्त jQuery के नोटों पर भी ध्यान दें :

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

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

Answer 8

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

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

Answer 9

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

Comments

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

— उरका

यदि आप अस्पष्टता के साथ इनपुट छिपाते हैं: 0, यह अभी भी टैब कुंजी के साथ चुना जाता है

— यांग्बोइउमपकाटी

Answer 10

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

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. एक रूपरेखा की आवश्यकता नहीं है

Comments

JQuery के लिए थोड़ा अलग तरीके से काम करता है; इसे दृश्यमान माना जाता visibility: hiddenहै ।

— एलेक्स

(यकीनन बेवकूफ) jQuery के व्यवहार की नकल करने के लिए ऊपर दिए गए कोड को बदलना काफी आसान है। । । । । function isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {true पर लौटें;} if (o.currentStyle && o.currentStyle ["display]]]! =" none "") {Return isRendered (o.parentNode);} और अगर (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertValue ("display"! = "none") {return isRendered (o.parentNode) );}} असत्य लौटें;}

— मैट ब्रॉक

निश्चित रूप से, मैं केवल उन उपयोगकर्ताओं के लाभ के लिए इसे जोड़ रहा था जिन्होंने इसका कोड स्कैन किए बिना इसका उपयोग किया था। :)

— एलेक्स

Answer 11

मैं CSS क्लास का उपयोग करता हूँ .hide { display: none!important; }।

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

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

Comments

.hasClass('hide')यदि माता-पिता का पूर्वज छिपा हुआ है (जो इसे भी छिपाएगा) तो जाँच नहीं करता। यदि आप जाँच करके संभवत: सही ढंग से काम करने के लिए इसे प्राप्त कर सकते हैं .closest('.hide').length > 0, लेकिन पहिया को क्यों मजबूत करें?

— 23

यदि आप HTML पर दिखाई देने वाले तत्व को वेरिएंट में प्रस्तावित करते हैं, तो मेरा वेरिएंट रिटर्न करता है यदि तत्व आपके जावास्क्रिप्ट कोड / व्यू इंजन द्वारा सीधे छिपा हुआ था। यदि आपका पता है कि मूल तत्वों को कभी भी छिपाया नहीं जाना चाहिए - .hasClass () का उपयोग अधिक सख्त होने के लिए और भविष्य के बग को रोकने के लिए करें। यदि आप न केवल दृश्यता की जाँच करना चाहते हैं बल्कि तत्व स्थिति भी निर्धारित करते हैं - .hasClass () का भी उपयोग करें। अन्य मामलों में .closest () बेहतर है।

— एवगेनी लेविन

क्यों न आप बस का उपयोग करें .is (": दृश्यमान")?

— NOT_trust_me

Answer 12

डेमो लिंक

$('#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 के टूल और विजेट: यह देखने के लिए कि एलिमेंट छिपाना या विज़िबल का उपयोग करना है या नहीं

Comments

@ विज्ञापन लेकिन यह लिंक इस फ़ंक्शन का कार्यशील उदाहरण दिखा रहा है। मुझे लगता है कि एक व्यावहारिक उत्तर पाठ के पूरे पृष्ठ पर भार हो सकता है :)

— कोड स्पाई

Answer 13

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

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

या फिर आप के साथ एक ही सरल बना सकते हैं है इस प्रकार है।

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

Answer 14

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

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

Answer 15

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

Answer 16

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

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

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

तो यह वास्तव में बॉक्स-मॉडल और तत्व के लिए गणना की गई शैली के संबंध में समझ में आता है। यहां तक कि अगर चौड़ाई और ऊंचाई सेट नहीं हैं स्पष्ट रूप से 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- अल्फा 1 के साथ JSFiddle:

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

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

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

Answer 17

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

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

Comments

यह कौन सी भाषा / बोली / पुस्तकालय है? मैं जेएस में इस वाक्यविन्यास से परिचित नहीं हूं ...

— nbrooks

Answer 18

उदाहरण:

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

Answer 19

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

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

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

var $book = $('#book')

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

Comments

आपने यह कैसे निर्धारित किया कि एक चयनकर्ता को चर में सहेजना वास्तव में तेज़ है?

— इलिया रोस्तोवत्सेव

हाय @ इलिया रोस्तोवत्सेव jsperf.com/caching-jquery-selectors वहाँ आप परीक्षण चला सकते हैं। वैसे भी यह अच्छा है कि इसे कैश्ड किया जाए ताकि इसे तेजी से एक्सेस किया जा सके

— Matthias Wegtun

यह उपयुक्त है यदि आप एक ही चर का उपयोग करके एक ही वस्तु को कॉल करने और कॉल करने के बजाय प्रक्रिया से बाहर करना चाहते हैं।

— केनेथ पलगानास 16

Answer 20

क्लास टॉगलिंग का इस्तेमाल करें, स्टाइल एडिटिंग का नहीं। । ।

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

---

जावास्क्रिप्ट सर्वश्रेष्ठ आचरण और अनुकूलन

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

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

Answer 21

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

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

Answer 22

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

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

a) यदि दस्तावेज़ छिपा नहीं है, तो जांचें

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

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

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

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

एंड्रॉइड 4.4 (मूल ब्राउज़र / क्रोम / फ़ायरफ़ॉक्स), फ़ायरफ़ॉक्स (विंडोज / मैक), क्रोम (विंडोज / मैक), ओपेरा (विंडोज प्रेस्टो / मैक वेबिट), इंटरनेट एक्सप्लोरर (इंटरनेट एक्सप्लोरर 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

Answer 23

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

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

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

Answer 24

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

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

Answer 25

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

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

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

Answer 26

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

Answer 27

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

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

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

Answer 28

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

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

वर्किंग फिडल

Answer 29

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

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

Comments

या, y'kno, बस पूरी सशर्त से छुटकारा पाएं और कहें $('elementToToggle').toggle('slow');...:)

— nbrooks

Answer 30

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