المحدد :visible() في jQuery
المحدد :visible
الوصف
تحديد كل العناصر المرئية.
jQuery( ":visible" )
أُضيف مع الإصدار: 1.0.
تعتبر العناصر مرئية إذا كانت تشغل مساحة في المستند. العناصر المرئية لها عرض أو ارتفاع أكبر من الصفر.
العناصر ذات الخاصية visibility: hidden أو opacity: 0 تعتبر مرئية، نظرًا لأنها لا تزال تستهلك مساحة في تخطيط الصفحة.
تُعتبر العناصر غير الموجودة في المستند مخفية؛ ليس لدى jQuery طريقة لمعرفة ما إذا كانت ستكون مرئية عند إلحاقها بوثيقة ما لأنها تعتمد على الأنماط المُطبّقة.
هذا المحدد هو عكس المحدد :hidden. لذلك، كل عنصر مُحدد بواسطة :visible يكون غير مُحدد بواسطة :hidden والعكس بالعكس.
تُعد جميع عناصر option مخفية، بغض النظر عن حالة selected الخاصة بها.
أثناء الحركات التي تخفي عنصرًا ما، يُعتبر العنصر مرئيًا حتى نهاية الحركة. أثناء حركة إظهار عنصرٍ ما، يعتبر العنصر مرئيًا عند بداية الحركة.
طريقة حساب المحدد :visible تغيرت في الإصدار jQuery 1.3.2. توضح ملاحظات الإصدار هذه التغييرات بمزيد من التفصيل.
عدّل الإصدار jQuery 3 قليلًا من معنى :visible (وبالتالي معنى :hidden ). فبدءًا من هذا الإصدار، ستُعد العناصر :visible إذا كانت تحتوي على أي مربعات تنسيق، بما في ذلك المربعات التي يبلغ عرضها و/أو ارتفاعها صفر. على سبيل المثال، ستُحدد عناصر br والعناصر المضمنة بدون أي محتوى بواسطة المحدد :visible.
ملاحظات إضافية
- نظرًا لأن
:visibleعبارة عن ملحق jQuery وليست جزءًا من مواصفات CSS فإن الاستعلامات التي تستخدم:visibleلا يمكن أن تستفيد من تحسين الأداء المقدم بواسطة تابع DOM الأصليquerySelectorAll().لتحقيق أفضل أداء عند استخدام :visible لتحديد العناصر، حدد أولاً العناصر باستخدام محدد CSS خالص، ثم استخدم.filter(":visible"). - يمكن أن يكون لاستخدام هذا المحدد تأثيرًا كبيرًا على الأداء، لأنه قد يجبر المتصفح على إعادة مسح الصفحة قبل أن يتمكن من تحديد مستوى الرؤية. يمكن أن يوفر تتبع رؤية العناصر باستخدام طرق أخرى، باستخدام صنفٍ ما على سبيل المثال، أداءً أفضل.
أمثلة
تحويل جميع عناصر <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>