كيف يمكنني التحقق من إذا كان العنصر هو مخفي في jQuery ؟

Question

من الممكن تبديل وضوح عنصر باستخدام وظائف .hide(), .show() أو .toggle().

كيف يمكنك اختبار ما إذا كان عنصر مرئية أو مخفية ؟

Answer 1

منذ أن السؤال يشير إلى عنصر واحد ، هذا الرمز قد يكون أكثر ملاءمة:

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

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

نفس twernt اقتراح, ولكن تطبيقها على عنصر واحد;و مباريات الخوارزمية الموصى به في التعليمات مسج

Answer 2

ويمكنك استخدام hidden محدد:

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

وعلى visible محدد:

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

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 لا. ولكن ما سبق قد يكون من المفيد في كثير من الحالات، وخصوصا عندما كنت في حاجة للعثور إذا كان هناك أي عناصر div الخطأ مرئية في الأصل خفية لأنه في مثل هذه الظروف سوف :visible لا تعمل.

Answer 4

وأي من هذه الإجابات معالجة ما أفهم أن يكون السؤال الذي ما كنت تبحث عن، <م> "كيف يمكنني التعامل مع العناصر التي لها visibility: hidden؟" . سوف لا :visible ولا :hidden التعامل مع هذا، وكلاهما يبحث عن عرض في الوثائق. بقدر ما يمكن أن تحدد، ليس هناك محدد للتعامل مع الرؤية CSS. هنا هو كيف حلها (محددات مسج القياسية، قد يكون هناك تركيب أكثر المكثف):

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

Answer 5

من <وأ href = "http://learn.jquery.com/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element/ "يختلط =" noreferrer "> كيف يمكنني تحديد حالة عنصر مثبت؟

---

ويمكنك تحديد ما إذا تم طي عنصر أم لا باستخدام :visible و:hidden محددات.

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

إذا كنت ببساطة تعمل على عنصر بناء على وضوحه، يمكنك تضمين فقط :visible أو :hidden في التعبير محدد. على سبيل المثال:

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

Answer 6

وفي كثير من الأحيان عند التحقق إذا كان هناك شيء غير واضح أو لا، وأنت تسير إلى الذهاب الحق المقبلة على الفور وتفعل شيئا آخر معها. مسج تسلسل يجعل هذا سهلا.

وحتى إذا كان لديك محدد وتريد تنفيذ بعض الإجراءات على ذلك إلا إذا غير مرئية أو مخفية، يمكنك استخدام 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" });

Answer 7

على :visible محدد وفقا مسج الوثائق:

• لديهم CSS display قيمة none.
• هم عناصر النموذج مع type="hidden".
• عرض و ارتفاع صراحة تعيين إلى 0.
• سلف العناصر المخفية ، وبالتالي فإن عنصر لا يظهر على الصفحة.

العناصر مع visibility: hidden أو opacity: 0 تعتبر مرئية لأنها لا تزال تستهلك مساحة في التخطيط.

وهذا مفيد في بعض الحالات وغير مجدية في الآخرين ، لأنه إذا كنت تريد أن تحقق ما إذا كان العنصر مرئيا (display != none) ، وتجاهل الآباء الرؤية ، سوف تجد أن تفعل .css("display") == 'none' ليس فقط أسرع ، ولكن أيضا عودة الرؤية التحقق بشكل صحيح.

إذا كنت تريد أن تحقق الرؤية بدلا من العرض, يجب استخدام: .css("visibility") == "hidden".

أيضا أن تأخذ في الاعتبار إضافية مسج الملاحظات:

لأن :visible هو مسج التمديد وليس جزءا من مواصفات CSS, الاستعلامات باستخدام :visible لا يمكن الاستفادة من تعزيز الأداء المقدمة من قبل الأم دوم querySelectorAll() الأسلوب.لتحقيق أداء أفضل عند استخدام :visible لتحديد العناصر أولا تحديد العناصر باستخدام CSS نقية محدد ، ثم استخدام .filter(":visible").

أيضا, إذا كنت تشعر بالقلق إزاء الأداء, يجب أن تحقق الآن تراني إظهار/إخفاء الأداء (2010-05-04).واستخدام أساليب أخرى إلى إظهار وإخفاء العناصر.

Answer 8

وهذا يعمل بالنسبة لي، وأنا أستخدمه show() وhide() لجعل بلدي شعبة خفية / مرئية:

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

Answer 9

كيف عنصر الرؤية مسج يعمل;

عنصر يمكن أن تكون مخفية مع display:none, visibility:hidden أو opacity:0.الفرق بين هذه الأساليب:

• display:none يخفي عنصر, وأنها لا تأخذ أي الفضاء ؛
• visibility:hidden يخفي عنصر, لكنه لا يزال يأخذ مساحة في تخطيط ؛

• opacity:0 يخفي عنصر "visibility:hidden" ، وأنه لا يزال يأخذ مساحة في تخطيط ؛ الفرق الوحيد هو أن التعتيم يتيح واحد لجعل عنصر جزئيا شفافة ؛

  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: ""
    });
  }
  

  مفيدة مسج تبديل طرق:

  $('.click').click(function() {
    $('.target').toggle();
  });
  
  $('.click').click(function() {
    $('.target').slideToggle();
  });
  
  $('.click').click(function() {
    $('.target').fadeToggle();
  });
  

Answer 10

وأود أن استخدام CSS الطبقة .hide { display: none!important; }.

لإخفاء / عرض، أدعو .addClass("hide")/.removeClass("hide"). لفحص الرؤية، وأنا استخدم .hasClass("hide").

وانها وسيلة بسيطة وواضحة للتحقق عناصر / إخفاء / إظهار، إذا كنت لا تخطط لاستخدام .toggle() أو .animate() الأساليب.

Answer 11

يمكنك أيضا القيام بذلك باستخدام جافا سكريبت عادي:

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. يعمل CSS و أنماط مضمنة

4. لا تتطلب إطارا

Answer 12

ويمكن للمرء أن مجرد استخدام hidden أو visible السمة، مثل:

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

وأو يمكنك تبسيط الشيء نفسه مع هو كما يلي.

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

Answer 13

رابط تجريبي

$('#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="" />

المصدر:

مدون المكونات ن اللعب - مسج الأدوات والحاجيات:كيفية معرفة ما إذا كان عنصر مخفية أو مرئية باستخدام مسج

Answer 14

ويجب تعيين ebdiv إلى style="display:none;". يعمل كل من العرض والاختباء:

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

Answer 15

والجواب آخر يجب أن نضع في الاعتبار هو إذا كنت تخفي عنصر، يجب عليك استخدام مسج ولكن بدلا من إخفائه في الواقع، يمكنك إزالة العنصر كله، ولكن قمت بنسخ محتواه HTML والعلامة نفسها إلى متغير مسج، وبعد ذلك كل ما عليك القيام به هو اختبار إذا كان هناك مثل علامة على الشاشة، وذلك باستخدام if (!$('#thetagname').length) وضعها الطبيعي.

Answer 16

عند اختبار عنصر ضد :hidden محدد في مسج ينبغي النظر فيها مطلقة وضع عنصر قد يكون الاعتراف خفية على الرغم من أن الطفل عناصر مرئية.

هذا يبدو إلى حد ما غير بديهية في المقام الأول – على الرغم من وجود نظرة فاحصة على مسج الوثائق يعطي المعلومات ذات الصلة:

يمكن اعتبار العناصر المخفية لعدة أسباب:[...] عرض و ارتفاع صراحة تعيين إلى 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>

---

تحديث مسج 3.x:

مع مسج 3 وصفها سيتم تغيير السلوك!عناصر سيتم النظر مرئية إذا كان لديهم أي تخطيط مربعات ، بما في ذلك تلك من صفر العرض أو الارتفاع.

JSFiddle مع مسج 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");

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')
}

وأو ما يلي هو أيضا سام، وتوفير محدد مسج في متغير أن يكون الأداء أفضل عندما كنت في حاجة إليها عدة مرات:

var $book = $('#book')

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

Answer 20

استخدام فئة تبديل وليس أسلوب التحرير ...

استخدام الطبقات المعينة على "إخفاء" عناصر من السهل أيضا واحدة من الطرق الأكثر كفاءة.تبديل فئة "خفية" مع Display نمط من "لا شيء" أداء أسرع من تحرير هذا النمط مباشرة.شرحت بعض من هذا جيدا جدا في تجاوز سعة مكدس السؤال تحول اثنين من عناصر مرئية/مخبأة في نفس div.

---

جافا سكريبت أفضل الممارسات الأمثل

هنا هو حقا المنير الفيديو من Google Tech Talk Google مهندس الأمامية نيكولاس Zakas:

• تسريع الخاص بك جافا سكريبت (يوتيوب)

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

بعد كل شيء, لا شيء من الأمثلة يناسبني لذا كتبت بلدي.

الاختبارات (لا يوجد دعم من Internet Explorer filter:alpha):

أ) فحص إذا كان المستند غير مخفي

ب) تحقق مما إذا كان عنصر صفر العرض / الارتفاع / غموض أو display:none / visibility:hidden في أنماط مضمنة

ج) التحقق من إذا كان مركز (أيضا لأنه أسرع من اختبار كل بكسل / الزاوية) من عنصر غير مخفي من قبل عنصر آخر (وكل الأجداد ، على سبيل المثال: overflow:hidden / التمرير / عنصر واحد على enother) أو حواف الشاشة

د) معرفة ما إذا كان عنصر صفر العرض / الارتفاع / غموض أو display:none / visibility:hidden في حسابها أنماط (من بين جميع الأجداد)

اختبار على

الروبوت 4.4 (المتصفح الأصلي/كروم/فايرفوكس), فايرفوكس (ويندوز/ماك) والكروم (ويندوز/ماك), أوبرا (ويندوز المعزوفة/ماك بكت), إنترنت إكسبلورر (Internet Explorer 5 إلى 11 وثيقة وسائط + Internet Explorer 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") والشيكات مسج لكل الأشياء تلقائيا.

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 (كما هو موضح في مسج: مرئية محدد ) - يمكننا معرفة ما اذا كان العنصر حقا اضحة في هذه الطريقة:

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

ولكن ماذا لو CSS العنصر هو كما يلي؟

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

هذه الإجابة على سؤال تجاوز المكدس <م> كيفية معرفة ما اذا كان عنصر هو خارج الشاشة ينبغي أيضا أخذها بعين الاعتبار.

Answer 28

وأيضا وهنا التعبير الشرطي الثلاثي للتحقق من حالة العنصر ومن ثم للتبديل ما يلي:

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

Answer 29

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

Answer 30

ويمكن إنشاء وظيفة من أجل التحقق من وجود سمات الرؤية / عرض من أجل قياس ما إذا كان يتم عرض عنصر في واجهة المستخدم أو لا.

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

العمل كمان