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





15 Answers

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

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

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

// Matches all elements that are visible
$('element:visible')
javascript jquery dom visibility

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

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




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

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



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



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

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



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

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

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




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

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

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

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



$('#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="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

स्रोत:

ब्लॉगर प्लग एन प्ले - jQuery टूल्स और विजेट्स: एलिमेंट छिपा हुआ है या jQuery का उपयोग करके दृश्यमान है या नहीं

jsFiddle:

JSFiddle - ipsjolly - k4WWj




एक तत्व का परीक्षण करते समय :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



उदाहरण:

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




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

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

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

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




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

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




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

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




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



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

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

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




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

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



Related