التابع .prev() في jQuery
.prev( [selector ] )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يجلب هذا التابع العنصر الأخ الذي يسبق مباشرةً كل عنصر في مجموعة العناصر المطابقة. إن مُرِّر للتابع محدِّد، فسيرشِّح جميع تلك العناصر التي يجدها أيضًا ويعيد ما تطابق منها.
.prev( [selector ] )
أُضيف مع الإصدار: 1.0.
selector
سلسلة نصية تحتوي على تعبير محدِّد لمطابقة العناصر.
إن كان لدينا كائن jQuery يمثل مجموعة عناصر DOM، فسيبحث التابع .prev() عن العنصر الأخ الذي يأتي قبل كل عنصر من هذه العناصر مباشرةً في شجرة DOM ثمَّ ينشئ كائن jQuery جديد يضع فيه العناصر التي وجدها.
يقبل التابع اختياريًّا تعبير محدِّد لنفس النوع الذي يمكن تمريره إلى الدالة $(). إن طابقت تلك العناصر الأخوة هذا المحدِّد، فستبقى في كائن jQuery المُنشأ حديثًا آنذاك وإلا فستُستبعَد منه.
بفرض أنَّه لدينا صفحة تحتوي على قائمة بسيطة مثل:
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li class="third-item">العنصر الثالث</li>
<li>العنصر الرابع</li>
<li>العنصر الخامس</li>
</ul>
إن بدأنا عند العنصر الثالث، فسنعثر على العنصر الأخ الذي يأتي قبله مباشرةً:
$( "li.third-item" ).prev().css( "background-color", "red" );
سيكون نتيجة تنفيذ هذه الشيفرة هو تغيير لون خلفية العنصر الثاني إلى اللون الأحمر. بما أنَّه لم نمرِّر تعبير محدِّد إلى التابع، فلا شك أنَّ هذا العنصر سيضاف إلى الكائن. إن زودنا التابع بتعبير محدِّد معين، فسيتحقَّق من تطابق العنصر قبل إضافته إلى الكائن.
إن لم يكن هنالك عنصر أخ يسبق العنصر المحدَّد أو إن لم يتطابق المحدَّد المعطى مع أي عنصر، فسيُعاد كائن jQuery فارغ.
لتحديد جميع العناصر الأخوة السابقة وليس الأخ المجاور السابق فقط، استعمل التابع .prevAll().
أمثلة
مثال عن إيجاد العنصر الأخ السابق لكل عنصر <div>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prev مثالٌ عن استعمال التابع</title>
<style>
div {
width: 40px;
height: 40px;
margin: 10px;
float: left;
border: 2px blue solid;
padding: 2px;
}
span {
font-size: 14px;
}
p {
clear: left;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div></div>
<div><span>لدي عنصر ابن</span></div>
<div></div>
<div></div>
<div></div>
<div id="start"></div>
<div></div>
<p><button>حدِّد العنصر السابق</button></p>
<script>
var $curr = $( "#start" );
$curr.css( "background", "#f99" );
$( "button" ).click(function() {
$curr = $curr.prev();
$( "div" ).css( "background", "" );
$curr.css( "background", "#f99" );
});
</script>
</body>
</html>
مثال عن إيجاد العنصر الأخ السابق لكل فقرة <p> شرط أن يكون من الصنف "selected":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prev مثالٌ عن استعمال التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div><span>السلام عليكم</span></div>
<p class="selected">مرحبًا</p>
<p>كيف الحال؟</p>
<script>
$( "p" ).prev( ".selected" ).css( "background", "yellow" );
</script>
</body>
</html>