المحدد :visible في jQuery
المحدد :visible
الوصف
تحديد كل العناصر المرئية.
jQuery( ":visible" )
أُضيف مع الإصدار: 1.0.
تعدّ العناصر مرئية إذا كانت تشغل مساحة في المستند. العناصر المرئية لها عرض أو ارتفاع أكبر من الصفر.
العناصر ذات الخاصية visibility: hidden أو opacity: 0 تعدّ مرئية، نظرًا لأنها لا تزال تستهلك مساحة في تخطيط الصفحة.
تعدّ العناصر غير الموجودة في المستند مخفية؛ ليس لدى jQuery طريقة لمعرفة ما إذا كانت ستكون مرئية عند إلحاقها بوثيقة ما لأنها تعتمد على الأنماط المُطبّقة.
هذا المحدد هو عكس المحدد :hidden. لذلك، كل عنصر مُحدد بواسطة :visible يكون غير مُحدد بواسطة :hidden والعكس بالعكس.
تُعد جميع عناصر option مخفية، بغض النظر عن حالة selected الخاصة بها.
أثناء الحركات التي تخفي عنصرًا ما، يعدّ العنصر مرئيًا حتى نهاية الحركة. أثناء حركة إظهار عنصرٍ ما، يعدّ العنصر مرئيًا عند بداية الحركة.
عدّل الإصدار jQuery 3 قليلًا من معنى :visible (وبالتالي معنى :hidden). فبدءًا من هذا الإصدار، ستُعد العناصر مرئيةً :visible إذا كانت تحتوي على أي مربعات تنسيق، بما في ذلك المربعات التي يبلغ عرضها و/أو ارتفاعها صفر. على سبيل المثال، ستُحدد عناصر <br> والعناصر السطرية (inline elements) دون أي محتوى بواسطة المحدد :visible.
ملاحظات إضافية
- نظرًا لأن
:visibleعبارة عن ملحق jQuery وليست جزءًا من مواصفات CSS فإن الاستعلامات التي تستخدم:visibleلا يمكن أن تستفيد من تحسين الأداء المقدم بواسطة تابع DOM الأصليquerySelectorAll()؛ لتحقيق أفضل أداء عند استخدام:visibleلتحديد العناصر، حدد أولاً العناصر باستخدام محدد CSS خالص، ثم استخدم.filter(":visible"). - يمكن أن يكون لاستخدام هذا المحدد تأثيرٌ كبيرٌ على الأداء، لأنه قد يجبر المتصفح على إعادة تصيير (re-render) الصفحة قبل أن يتمكن من تحديد مستوى الرؤية. يمكن أن يوفر تتبع رؤية العناصر باستخدام طرائق أخرى، باستخدام صنفٍ ما على سبيل المثال، أداءً أفضل.
أمثلة
تحويل جميع عناصر <div> المرئية إلى اللون الأصفر عند النقر:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>visible مثال على التابع</title>
<style>
div {
width: 50px;
height: 40px;
margin: 5px;
border: 3px outset green;
float: left;
}
.starthidden {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>إظهار العناصر المخفية لرؤية أنها لا تتغير</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
<script>
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
</script>
</body>
</html>