التابع .next() في jQuery
.next( [selector ] )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يجلب هذا التابع العنصر الأخ الذي يلي مباشرةً كل عنصر في مجموعة العناصر المطابقة.
.next( [selector ] )
أُضيف مع الإصدار: 1.0.
selector
سلسلة نصية تحتوي على تعبير محدِّد لمطابقة العناصر.
عند إعطاء التابع .next() كائن jQuery يمثل مجموعة عناصر DOM، فسيبحث عن العناصر الأخوة التي تأتي بعد هذه العناصر مباشرةً في شجرة DOM ثمَّ ينشئ كائن jQuery جديد يضع فيه العناصر التي وجدها.
يقبل التابع اختياريًّا تعبير محدِّد لنفس النوع الذي يمكن تمريره إلى الدالة $(). إن طابقت تلك العناصر الأخوة هذا المحدِّد، فستبقى في كائن jQuery المُنشأ حديثًا آنذاك وإلا فستُستبعَد منه.
بفرض أنَّه لدينا صفحة تحتوي على قائمة بسيطة مثل:
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li class="third-item">العنصر الثالث</li>
<li>العنصر الرابع</li>
<li>العنصر الخامس</li>
</ul>
إن بدأنا عند العنصر الثالث، فسنعثر على العنصر الأخ الذي يأتي بعده مباشرةً:
$( "li.third-item" ).next().css( "background-color", "red" );
سيكون نتيجة تنفيذ هذه الشيفرة هو تغيير لون خلفية العنصر الرابع إلى اللون الأحمر. بما أنَّه لم نمرِّر تعبير محدِّد إلى التابع، فلا شك أنَّ هذا العنصر سيضاف إلى الكائن. إن زودنا التابع بتعبير محدِّد معين، فسيتحقَّق من تطابق العنصر قبل إضافته إلى الكائن.
أمثلة
مثال عن إيجاد العنصر الأخ التالي لكل زر <button> مُعطَّل (disabled) ثمَّ تغيير المحتوى النصي له إلى "هذا الزر مُعطَّل":
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>next مثالٌ عن استعمال التابع</title>
<style>
span {
color: blue;
font-weight: bold;
}
button {
width: 100px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div><button disabled="disabled">الزر الأول</button> - <span></span></div>
<div><button>الزر الثاني</button> - <span></span></div>
<div><button disabled="disabled">الزر الثالث</button> - <span></span></div>
<script>
$( "button[disabled]" ).next().text( "هذا الزر مُعطَّل" );
</script>
</body>
</html>
مثال عن إيجاد العنصر الأخ الذي يلي كل فقرة <p> وإبقاء العناصر التي يعثر عليها إن كانت من الصنف "selected":
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>next مثالٌ عن استعمال التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>السلام عليكم</p>
<p class="selected">مرحبًا</p>
<div><span>مرحبًا! هل من أحد هنا؟</span></div>
<script>
$( "p" ).next( ".selected" ).css( "background", "yellow" );
</script>
</body>
</html>