التابع .nextAll() في jQuery
.nextAll( [selector ] )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يجلب هذا التابع جميع العناصر الأخوة لكل عنصر في مجموعة العناصر المطابقة، ويرشحها باستعمال محدِّد اختياريًّا.
.nextAll( [selector ] )
أُضيف مع الإصدار: 1.2.
selector
سلسلة نصية تحتوي على تعبير محدِّد لمطابقة العناصر.
عند إعطاء التابع .nextAll() كائن jQuery يمثل مجموعة عناصر DOM، فسيبحث عن العناصر الأخوة لهذه العناصر في شجرة DOM ثمَّ سينشئ كائن jQuery جديد يضع فيه العناصر التي وجدها.
يقبل التابع اختياريًّا تعبير محدِّد لنفس النوع الذي يمكن تمريره إلى الدالة $(). إن طابقت تلك العناصر الأخوة هذا المحدِّد، فستبقى في كائن jQuery المُنشأ حديثًا آنذاك وإلا فستُستبعَد منه.
بفرض أنَّه لدينا صفحة تحتوي على قائمة بسيطة مثل:
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li class="third-item">العنصر الثالث</li>
<li>العنصر الرابع</li>
<li>العنصر الخامس</li>
</ul>
إن بدأنا عند العنصر الثالث، فسنعثر على العنصر الأخ الذي يأتي بعده مباشرةً:
$( "li.third-item" ).nextAll().css( "background-color", "red" );
سيكون نتيجة تنفيذ هذه الشيفرة هو تغيير لون خلفية العنصر الرابع والخامس إلى اللون الأحمر. بما أنَّنا لم نمرِّر تعبير محدِّد إلى التابع، فلا شك أنَّ هذين العنصرين سيضافان إلى الكائن. إن زودنا التابع بتعبير محدِّد معين، فسيتحقَّق من تطابق العنصرين قبل إضافتهما إلى الكائن.
أمثلة
مثال عن إيجاد جميع عناصر <div> التي تأتي بعد العنصر الأول وإعطائها صنفًا معينًا:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>nextAll مثالٌ عن استعمال التابع</title>
<style>
div {
width: 80px;
height: 80px;
background: #abc;
border: 2px solid black;
margin: 10px;
float: left;
}
div.after {
border-color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>العنصر الأول</div>
<div>عنصر أخ<div>عنصر ابن لعنصر أخ</div></div>
<div>عنصر أخ</div>
<div>عنصر أخ</div>
<script>
$( "div:first" ).nextAll().addClass( "after" );
</script>
</body>
</html>
مثال عن إيجاد جميع الفقرات <p> بعد العنصر الابن الثاني داخل العنصر <body> وإعطائها صنفًا معينًا:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>nextAll مثالٌ عن استعمال التابع</title>
<style>
div, p {
width: 60px;
height: 60px;
background: #abc;
border: 2px solid black;
margin: 10px;
float: left;
}
.after {
border-color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>عنصر p</p>
<div>عنصرdiv</div>
<p>عنصر p</p>
<p>عنصر p</p>
<div>عنصر div</div>
<p>عنصر p</p>
<div>عنصر div</div>
<script>
$( ":nth-child(1)" ).nextAll( "p" ).addClass( "after" );
</script>
</body>
</html>