التابع .parent() في jQuery
.parent( [selector ] )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يجلب هذا التابع العنصر الأب لكل عنصر في مجموعة العناصر المطابقة، ويمكن أن يرشِّح أيضًا تلك العناصر التي أعادها اختياريًا باستعمال محدِّد.
.parent( [selector ] )
أضيف مع الإصدار 1.0.
selector
سلسلة نصية تحتوي على تعبير محدِّد لمطابقة العناصر التي يجلبها التابع
عند إعطاء التابع .parent() كائن jQuery يمثل مجموعة من عناصر DOM، فسيبحث عن العنصر الأب المباشر لكل عنصر من هذه العناصر في شجرة DOM ثمَّ سينشئ كائنًا جديدًا من النوع jQuery ويضع فيه العناصر التي وجدها وطابقها.
يشبه هذا التابع التابع .parents() باستثناء أنَّ الأول ينتقل مستوًى واحدًا إلى الأعلى فقط في شجرة DOM. يختلفان أيضًا بأنَّ التابع $( "html" ).parent() يعيد مجموعةً تحتوي على العنصر document بينما يعيد التابع $( "html" ).parents() مجموعةً فارغة.
يقبل التابع أن يمرَّر إليه اختياريًّا تعبير محدِّد من النوع نفسه الذي يمكن تمريره إلى الدالة $(). إن مُرِّر المحدِّد، فستُرشَّح العناصر بالتحقق من مطابقتها له أم لا.
بفرض أنَّه لدينا صفحة تحتوي على قائمة متشعبة بسيطة مثل:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">أ</li>
<li class="item-b">ب
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">ج</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
إن بدأنا عند العنصر "أ"، فيمكننا إيجاد العنصر الأب له:
$( "li.item-a" ).parent().css( "background-color", "red" );
نتيجة هذا السطر هي تغيير لون خلفية القائمة ذات الصنف "level-2" إلى اللون الأحمر. بما أنَّه لم نمرِّر تعبير محدِّد، فسيضاف العنصر إلى الكائن المعاد. أمَّا إن مرَّرنا تعبير محدِّد، فسيُتحقَق من مطابقة هذا العنصر أولًا ثمَّ سيضاف إلى الكائن المعاد بناءً على ذلك.
أمثلة
إظهار العنصر الأب لكل عنصر بالشكل "عنصر أب > عنصر ابن":
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>parent مثالٌ عن استعمال التابع</title>
<style>
div, p {
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>div,
<span>span, </span>
<b>b </b>
</div>
<p>p,
<span>span,
<em>em </em>
</span>
</p>
<div>div,
<strong>strong,
<span>span, </span>
<em>em,
<b>b, </b>
</em>
</strong>
<b>b </b>
</div>
<script>
$( "*", document.body ).each(function() {
var parentTag = $( this ).parent().get( 0 ).tagName;
$( this ).prepend( document.createTextNode( parentTag + " > " ) );
});
</script>
</body>
</html>
إيجاد العنصر الأب لكل فقرة <p> على أن يكون من الصنف "selected":
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>parent مثالٌ عن استعمال التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div><p>مرحبًا</p></div>
<div class="selected"><p>كيف الحال؟</p></div>
<script>
$( "p" ).parent( ".selected" ).css( "background", "yellow" );
</script>
</body>
</html>