javascript - كيف أتحقق من إخفاء عنصر في jQuery؟




dom visibility (20)

من الممكن تبديل رؤية عنصر ، باستخدام الدوال .hide() أو .show() أو .toggle() .

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

https://code.i-harness.com


استخدم تبديل الطبقة ، وليس تحرير النمط. . .

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

أفضل ممارسات جافا سكريبت والتحسين

في ما يلي مقطع فيديو مفيد حقًا لـ Google Tech Talk من قِبل مهندس الواجهة الأمامية لـ Google Nicholas Zakas:


أود استخدام فئة CSS. .hide { display: none!important; } .hide { display: none!important; } .

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

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


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

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

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

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

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

د) تحقق مما إذا كان العنصر يحتوي على صفر عرض / ارتفاع / عتامة أو display:none / مستوى الرؤية: مخفي في الأنماط المحسوبة (بين جميع الأسلاف)

اختبارها على

Android 4.4 (متصفح أصلي / Chrome / Firefox) وفايرفوكس (Windows / Mac) و Chrome (Windows / Mac) و Opera (Windows Presto / Mac Webkit) و Internet Explorer (وضعي مستندات Internet Explorer 5-11 + Internet Explorer 8 على آلة افتراضية) ، سفاري (ويندوز / ماك / iOS)

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

تحتاج إلى التحقق من كل من ... العرض وكذلك الرؤية:

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

إذا تحققنا من $(this).is(":visible") ، فقم بفحص jQuery لكلا الأشياء تلقائيًا.


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

يبدو هذا غير بديهي إلى حد ما في المقام الأول - على الرغم من إلقاء نظرة فاحصة على وثائق 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 سيتغير السلوك الموصوف! سيتم اعتبار العناصر مرئية إذا كانت تحتوي على أي مربعات تنسيق ، بما في ذلك مربعات العرض و / أو الارتفاع.

JSFiddle with jQuery 3.0.0-alpha1:

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

نفس JS سيكون عندها هذا الناتج:

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

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

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

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

للتحقق مما إذا كان غير مرئي يمكنني استخدام ! :

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

أو ما يلي أيضًا هو sam ، مما يحفظ محدد jQuery في متغير للحصول على أداء أفضل عندما تحتاج إليه عدة مرات:

var $book = $('#book')

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

مثال:

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


من كيف يمكنني تحديد حالة عنصر مثبت؟

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

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

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

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

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

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

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

نفس اقتراح twernt ، لكنه ينطبق على عنصر واحد ؛ ويتطابق مع الخوارزمية الموصى بها في الأسئلة الشائعة حول jQuery


هذا قد يعمل:

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


يتم استخدام مثال على استخدام التحقق المرئي من adblocker:

$(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" هو معرف الذي يمنع كتل adblocker. لذا تحقق من ذلك إذا كان مرئيًا يمكنك اكتشاف ما إذا كان adblocker قيد التشغيل.


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

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

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

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

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

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. لا يتطلب إطارًا


the: select المحدد وفقا لوثائق jQuery :

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

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

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

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

ضع في اعتبارك أيضًا ملاحظات jQuery الإضافية :

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

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


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

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

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

مصدر:

Blogger Plug n Play - jQuery Tools and Widgets: How to see if Element hidden or Visible Using jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj


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 لن تعمل :visible .





visibility