المحدد ‎‎‎:parent‎‎ في jQuery

من موسوعة حسوب
مراجعة 18:30، 9 يونيو 2018 بواسطة جميل-بيلوني (نقاش | مساهمات) (إضافة محتويات الصفحة.)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

المحدِّد ‎:parent

الوصف

يختار هذا المحدِّد جميع العناصر التي لها ابن واحد على الأقل (بما في ذلك العقد النصية).

jQuery( ":parent" )‎

أُضيف مع الإصدار: 1.0.

هذا المحدِّد هو عكس المحدِّد ‎:empty تمامًا.

يجب ملاحظة شيء واحد مهم مع المحدِّد ‎:parent (والمحدِّد ‎:empty) وهو أنَّ العناصر الأبناء قد تتضمن عقد نصية. توصي W3C بأن يحتوي العنصر <p> على عقدة ابن واحدة على الأقل، حتى لو كان هذا الابن مجرد نص (راجع https://www.w3.org/TR/html401/struct/text.html#edef-P). من ناحية أخرى، تكون بعض العناصر الأخرى فارغة (أي ليس لها أبناء) بالتعريف مثل العناصر <input> و <img> و <br> و <hr>.

للحصول على العنصر الأب أو العناصر الأجداد (ancestors) لمجموعة jQuery الحالية، استعمل التابع ‎.arent()‎ والتابع ‎.parents()‎.

ملاحظات إضافية

لمَّا كان المحدِّد ‎:parent هو ملحق في مكتبة jQuery  وليس جزءًا من مواصفة CSS، فإنَّ الاستعلامات التي تستعمل ‎:parent لا يمكنها الاستفادة من سرعة الأداء الذي يوفره تابع DOM الأصلي querySelectorAll()‎. للحصول على أداء أفضل في المتصفحات الحديثة، حدِّد العناصر باستعمال محدِّدات CSS الصرفة (pure) ثمَّ استعمل التابع ‎.filter(" :parent ")‎.

أمثلة

إيجاد جميع العناصر <td> التي لها أبناء (من ضمنها العقد النصية):

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>parent مثالٌ عن استعمال المحدد</title>
  <style>
  td {
    width: 40px;
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>القيمة 1</td><td></td></tr>
  <tr><td>القيمة 2</td><td></td></tr>
</table>
 
<script>
$( "td:parent" ).fadeTo( 1500, 0.3 );
</script>
 
</body>
</html>

مصادر