আমি কীভাবে চেক করব যে কোনও উপাদান jQuery এ লুকানো আছে?

Question

এটা একটি উপাদান দৃশ্যমানতা টগল ফাংশন ব্যবহার করে কি সম্ভব .hide(), .show()অথবা .toggle()?

একটি উপাদান visibleবা আপনি যদি পরীক্ষা করবেন hidden?

Comments

এটি উল্লেখ করার মতো (এমনকি এই সমস্ত সময়ের পরেও), যা $(element).is(":visible")jQuery 1.4.4 এর জন্য কাজ করে তবে jQuery 1.3.2 এর জন্য নয়, ইন্টারনেট & nbsp; এক্সপ্লোরার & nbsp; 8 এর অধীনে । সোভেটোমির সোনভের সহায়ক পরীক্ষার স্নিপেট ব্যবহার করে এটি পরীক্ষা করা যেতে পারে । প্রতিটি একের অধীনে পরীক্ষা করার জন্য, কেবল jQuery এর সংস্করণ পরিবর্তন করতে মনে রাখবেন।

— রূবেণ

এটি ভিন্ন প্রশ্ন হলেও

— মার্ক শুলথিস

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 এর () ব্যবহার করি। এই পদ্ধতিটি ডিওএম উপাদানগুলির সাথে কোনও মিল খুঁজে বের করে, যা উত্তীর্ণ প্যারামিটারকে সন্তুষ্ট করে। কোনও মিল থাকলে এটি সত্য হবে, অন্যথায় মিথ্যা ফিরে আসবে।

Comments

এই সমাধানটি বিভ্রান্তিকে উত্সাহিত করবে বলে মনে হয় visible=falseএবং display:none; যদিও মোটের সমাধানটি কোডারদের চেক করার জন্য অভিপ্রায়গুলি পরিষ্কারভাবে প্রকাশ করে display:none; (আড়াল করে উল্লেখ করুন যা নিয়ন্ত্রণ করে display:noneনা visible=true)

— kralco626

এটি সঠিক, তবে :visibleচিবর্গের নির্দেশ অনুসারে অভিভাবক উপাদানগুলি দৃশ্যমান কিনা তাও পরীক্ষা করবে will

— সোভেটোমির সোনেভ

আপনার একটি বক্তব্য রয়েছে - আমি এটি পরিষ্কার করব যে কোডটি কেবলমাত্র displayসম্পত্তিটির জন্য পরীক্ষা করে । দেওয়া হল যে মূল প্রশ্নটি হল show()এবং hide()এবং তারা সেট করেছে display, আমার উত্তরটি সঠিক। যাইহোক এটি আই 7 এর সাথে কাজ করে, এখানে একটি পরীক্ষার স্নিপেট রয়েছে - jsfiddle.net/MWZss ;

— সোভেটোমির সোনেভ

আমি আসলে দেখতে পেয়েছি যে বিপরীত যুক্তিযুক্ত শব্দগুলি আরও ভাল:! $ ('নির্বাচক') is হয় (': লুকানো'); কিছু কারণে. ব্যবহার করে দেখুন মূল্য.

— Kzqai

এখানে একটি সহজ বেঞ্চমার্ক পরীক্ষাটি হ'ল রেজিপ এক্সপের বিপরীতে: jsperf.com/jquery-is-vs-regexp- for-css-visibility । উপসংহার: আপনি যদি পারফরম্যান্সের জন্য বাইরে থাকেন তবে রিগ এক্সএফ ওভার ব্যবহার করুন () (যেহেতু () প্রকৃত উপাদানটি দেখার আগে সমস্ত লুকানো নোডের সন্ধান করে)।

— ম্যাক্স লেসেকে

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 পৃষ্ঠাগুলিতে এটি দেখায় যে কত ধীর: লুকানো বা: দৃশ্যমান অন্যান্য নির্বাচকদের সাথে তুলনা করা হয়। এটি নির্দেশ করার জন্য ধন্যবাদ।

— এটিয়েন ডুপুইস

যখন আপনি বেশ কয়েকটি উপাদান নিয়ে কাজ করছেন এবং খুব সামান্য কাজ চলছে - অর্থাত্ মামলার নিখুঁতভাবে ভাসার পরিমাণ - সময় সমস্যাটি একটি হাস্যকর বিষয় হিসাবে উদ্বেগজনক। ওহ, না! এটি 19 এমএসের পরিবর্তে 42 এমএস নিয়েছে !!!

— ভবলিংগার

আমি এই নির্বাচকটি ম্যামুলিভাবে উপাদানটি টগল করছি। $ ('উপাদান: লুকানো') আমার পক্ষে সর্বদা সত্য!

— জুমআইন

@ সিউনরাভ আপনি ডকুমেন্টেশনটি পুনরায় পড়তে চাইতে পারেন: গোপনীয় সমস্ত উপাদানগুলির জন্য প্রযোজ্য। ফর্ম উপাদানগুলি 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

এটি কেবলমাত্র একটি একক উপাদানের প্রদর্শন সম্পত্তি পরীক্ষা করে। দ্য: দৃশ্যমান বৈশিষ্ট্য পরীক্ষা করে প্যারেন্ট উপাদানগুলির দৃশ্যমানতাও পরীক্ষা করে।

— chiborg

এটি কেবলমাত্র সমাধান আমার জন্য কাজ যখন আই ই 8. সঙ্গে পরীক্ষা করছে

— evanmcd

@ শাইবার্গ হ্যাঁ, তবে কখনও কখনও আপনি যা চান তা হ'ল এবং "চালাক" জিকিউরিটি কীভাবে ছিল সেই কঠিন উপায়টি আমাকে শিখতে হয়েছিল ...

— কেসি

এই প্রশ্নের উত্তর দিতে না, প্রশ্ন হচ্ছে একটি একক উপাদান সম্পর্কে এবং ব্যবহার করা 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এর সাথে উপাদানগুলি দৃশ্যমান বলে বিবেচিত হয়, যেহেতু তারা এখনও লেআউটে স্থান গ্রহণ করে। দেখুন দ্বারা উত্তর পেড্রো Rainho এবং jQuery এর ডকুমেন্টেশন উপর :visibleনির্বাচক।

— অবাক

নোডের পিতামাতাকে যাচাই করার জন্য আপনাকে ডিওএমকে অতিক্রম করতে হবে, অন্যথায় এটি অকেজো।

— vsync

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... যেমন অনুমান করুন এটি একটি কিনারা-কেস

— জাজক্যাট

Answer 6

প্রায়শই কিছু দৃশ্যমান আছে কি না তা যাচাই করার সময় আপনি তত্ক্ষণাত্ এগিয়ে যাবেন এবং এর সাথে অন্য কিছু করতে যাচ্ছেন। 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" });

Comments

উদাহরণে ব্যবহৃত স্নিপেটে ডিওএম নোড বের করার কোনও কারণ নেই এবং তারপরে এটি আবার ব্যাক আপ করতে হবে। করণীয় ভাল: var $ বাটন = $ ('# বিটিএনআপডেট'); এবং তারপরে যদি অভিব্যক্তিগুলি কেবল $ (বোতাম) এর পরিবর্তে $ বোতামটি ব্যবহার করে। JQuery অবজেক্টটি ক্যাশে করার সুবিধা রয়েছে।

— লোকালপিসিগুই

jquerypot.com/…

— কেতন

Answer 7

:visibleনির্বাচক অনুযায়ী jQuery এর ডকুমেন্টেশন :

• তাদের একটি সিএসএস displayমান রয়েছেnone ।
• তারা সঙ্গে ফর্ম উপাদান type="hidden" ।
• তাদের প্রস্থ এবং উচ্চতা সুস্পষ্টভাবে 0 এ সেট করা আছে।
• একটি পূর্বপুরুষের উপাদান লুকানো আছে, সুতরাং উপাদানটি পৃষ্ঠায় প্রদর্শিত হয় না।

এগুলির সাথে visibility: hiddenবা opacity: 0এর সাথে উপাদানগুলি দৃশ্যমান বলে বিবেচিত হয়, যেহেতু তারা এখনও লেআউটে স্থান গ্রহণ করে।

এটি কিছু ক্ষেত্রে কার্যকর এবং অন্যদের ক্ষেত্রে অকেজো, কারণ আপনি যদি display != noneপিতামাতার দৃশ্যমানতা উপেক্ষা করে উপাদানটি দৃশ্যমান কিনা ( ) তা পরীক্ষা করতে চান তবে আপনি দেখতে পাবেন যে এটি করা .css("display") == 'none'কেবলমাত্র দ্রুত নয়, তবে দৃশ্যমানতার চেকটিও সঠিকভাবে ফিরে আসবে।

আপনি প্রদর্শনের পরিবর্তে দৃশ্যমানতা চেক করতে চান, আপনি ব্যবহার করা উচিত: .css("visibility") == "hidden"।

অতিরিক্ত jQuery নোটগুলিও বিবেচনা করুন :

যেহেতু :visibleএকটি jQuery এক্সটেনশন এবং CSS স্পেসিফিকেশনের অংশ নয়, এর সাহায্যে অনুসন্ধানগুলি :visibleদেশীয় DOM querySelectorAll()পদ্ধতি দ্বারা সরবরাহিত পারফরম্যান্স বৃদ্ধির সুবিধা নিতে পারে না । :visibleউপাদান নির্বাচন করার সময় সর্বোত্তম কর্মক্ষমতা অর্জন করতে প্রথমে খাঁটি সিএসএস নির্বাচক ব্যবহার করে উপাদান নির্বাচন করুন, তারপরে ব্যবহার করুন .filter(":visible")।

এছাড়াও, আপনি যদি পারফরম্যান্স সম্পর্কে উদ্বিগ্ন হন তবে আপনার এখন পরীক্ষা করা উচিত আমাকে দেখতে পাবেন ... প্রদর্শন / লুকিয়ে রাখুন পারফরম্যান্স (2010-05-04)। এবং উপাদানগুলি দেখানোর জন্য এবং লুকানোর জন্য অন্যান্য পদ্ধতিগুলি ব্যবহার করুন।

Answer 8

এটি আমার পক্ষে কাজ করে এবং আমি আমার ডিভিডিটি লুকিয়ে / দৃশ্যমান করতে show()এবং ব্যবহার hide()করতে যাচ্ছি:

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। ফাইল আপলোডগুলির জন্য কাস্টম বোতাম তৈরি করার কৌশলটি আমি শিখেছি।

— urraka

এছাড়াও আপনি যদি অস্বচ্ছতার সাথে ইনপুটটি আড়াল করেন: 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 আচরণ নকল করতে। । । । । ফাংশনটি রেন্ডারড (ও) {যদি ((o.nodeType! = 1) || (ও == ডকুমেন্ট.বডি)) {সত্য ফিরে; {প্রত্যাবর্তন isRendered (ও। ); false false মিথ্যা প্রত্যাবর্তন;}

— ম্যাট ব্রক

অবশ্যই, আমি এটির ব্যবহারকারীর সুবিধার জন্য এটি যুক্ত করেছিলাম যারা এর কোডটি স্ক্যান না করে এটি ব্যবহার করে। :)

— আলেক্স

Answer 11

আমি সিএসএস ক্লাস ব্যবহার করব .hide { display: none!important; } ।

লুকিয়ে / দেখানোর জন্য, আমি কল করি .addClass("hide")/.removeClass("hide")। দৃশ্যমানতা যাচাই করার জন্য, আমি ব্যবহার করি.hasClass("hide") ।

যদি আপনি ব্যবহার .toggle()বা .animate()পদ্ধতি ব্যবহার না করেন তবে এটি উপাদানগুলি চেক / আড়াল / প্রদর্শন করার একটি সহজ এবং স্পষ্ট উপায় ।

Comments

.hasClass('hide')পিতামাতার কোনও পূর্বপুরুষ লুকিয়ে আছে কিনা তা পরীক্ষা করে না (যা এটি লুকিয়ে রাখে)। আপনি সম্ভবত এটি পরীক্ষা করে সঠিকভাবে কাজ করতে পারেন .closest('.hide').length > 0তবে চাকাটি পুনরায় উদ্ভাবন করবেন কেন?

— nbrooks

এইচটিএমএলে উপাদানটি দৃশ্যমান হলে আপনি পরিবর্তনের প্রস্তাব দিচ্ছেন, উপাদানটি আপনার জাভাস্ক্রিপ্ট কোড / ভিউ ইঞ্জিন দ্বারা সরাসরি লুকানো থাকলে আমার রূপটি ফেরত দেয়। আপনার যদি জানা থাকে যে পিতামাত্ত উপাদানগুলি কখনই আড়াল না হওয়া উচিত - আরও কঠোর হতে ভবিষ্যতের বাগগুলি রোধ করার জন্য .ssClass () ব্যবহার করুন। আপনি যদি কেবলমাত্র দৃশ্যমানতা যাচাই করতে চান তবে উপাদান স্টেটটিও খুব সেট করে রাখেন - .াসকলাস ()ও ব্যবহার করুন। অন্যান্য ক্ষেত্রে। ক্লোজস্ট () ভাল।

— ইভজেনি লেভিন

আপনি কেবল .is (": দৃশ্যমান") ব্যবহার করবেন না কেন?

— dont_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 সরঞ্জাম এবং উইজেটগুলি: কীভাবে দেখুন যে উপাদানটি লুকানো আছে বা 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 বিষয়বস্তু এবং ট্যাগটি নিজেই একটি জিকুয়েরি ভেরিয়েবলের অনুলিপি করেছেন এবং তারপরে আপনার যা যা করা দরকার তা হ'ল সাধারণ ব্যবহার করে স্ক্রিনে যদি এমন ট্যাগ থাকে তবে তা পরীক্ষা করা দরকার if (!$('#thetagname').length)।

Answer 16

: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 সহ জেএসফিডাল:

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 আপনি সেখানে পরীক্ষা চালাতে পারেন। যাইহোক এটি ক্যাশ করে রাখা ভাল তাই এটি দ্রুত অ্যাক্সেস করা যায়

— ম্যাথিয়াস ওয়েগটুন

আপনি যদি একই বস্তুকে কল এবং কল করার পরিবর্তে প্রক্রিয়াটির মাধ্যমে একটি একক ভেরিয়েবল ব্যবহার করতে চান তবে এটি উপযুক্ত।

— কেনেথ পালাগানাস

Answer 20

ক্লাস টগলিং ব্যবহার করুন, স্টাইল সম্পাদনা নয়। । ।

"লুকানোর" উপাদানগুলির জন্য মনোনীত শ্রেণিগুলি ব্যবহার করা সহজ এবং সবচেয়ে দক্ষ পদ্ধতিগুলির মধ্যে একটি। কোনও Displayশৈলীর সাথে 'লুকানো' শ্রেণিতে টগল করা ' স্টাইল' সরাসরি সম্পাদনা করার চেয়ে দ্রুত সঞ্চালন করবে। স্ট্যাক ওভারফ্লো প্রশ্নে আমি এর বেশ কয়েকটি পুরোপুরিভাবে ব্যাখ্যা করলাম একই উপাদানটিতে দুটি উপাদান দৃশ্যমান / লুকানো রয়েছে ।

---

জাভাস্ক্রিপ্ট সেরা অনুশীলন এবং অনুকূলিতকরণ

গুগলের ফ্রন্ট-এন্ড ইঞ্জিনিয়ার নিকোলাস জাকাসের গুগল টেক টকের একটি সত্যিকারের আলোকিত ভিডিও এখানে:

• আপনার জাভাস্ক্রিপ্ট (ইউটিউব) গতি বাড়ান

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>

"অ্যাবলোকেরেক" একটি আইডি যা অ্যাডব্লককারীকে অবরুদ্ধ করে। সুতরাং এটি যদি দৃশ্যমান হয় তা পরীক্ষা করে দেখানো হচ্ছে যে আপনি অ্যাডব্লবারটি চালু আছে কিনা তা সনাক্ত করতে সক্ষম।

Answer 22

সর্বোপরি, উদাহরণগুলির কোনওটিই আমার পক্ষে উপযুক্ত নয়, তাই আমি নিজের লেখা own

পরীক্ষা (ইন্টারনেট এক্সপ্লোরার সমর্থন নেই)filter:alpha ):

ক) নথিটি গোপন না রয়েছে কিনা তা পরীক্ষা করে দেখুন

খ) কোনও উপাদানটির শূন্য প্রস্থ / উচ্চতা / অস্বচ্ছতা বা display:none/visibility:hidden ইনলাইন স্টাইল

গ) উপাদানটি কেন্দ্রের (প্রতিটি পিক্সেল / কোণার পরীক্ষার চেয়ে দ্রুততর কারণ) অন্যান্য উপাদান (এবং সমস্ত পূর্বপুরুষদের দ্বারা গোপন নেই) তা পরীক্ষা করে দেখুন: overflow:hidden / স্ক্রোল / অন্যটির উপরে একটি উপাদান)

d) কোনও উপাদানের শূন্য প্রস্থ / উচ্চতা / অস্বচ্ছতা বা display:none/ দৃশ্যমানতা আছে কিনা তা পরীক্ষা করুন : গণিত শৈলীতে লুকানো (সমস্ত পূর্বপুরুষের মধ্যে)

পরীক্ষিত

অ্যান্ড্রয়েড ৪.৪ (নেটিভ ব্রাউজার / ক্রোম / ফায়ারফক্স), ফায়ারফক্স (উইন্ডোজ / ম্যাক), ক্রোম (উইন্ডোজ / ম্যাক), অপেরা (উইন্ডোজ প্রেস্টো / ম্যাক ওয়েবকিট), ইন্টারনেট এক্সপ্লোরার (ইন্টারনেট এক্সপ্লোরার 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

অথবা, ইয়াকনো, কেবলমাত্র শর্তসাপেক্ষে পুরোপুরি পরিত্রাণ পান এবং বলুন $('elementToToggle').toggle('slow');...:)

— nbrooks

Answer 30

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