التابع .nextUntil() في jQuery
.nextUntil( [selector ] [, filter ] )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يجلب هذا التابع جميع العناصر الأخوة التالية لكل عنصر والموجودة ضمن مجال محدَّد بدءًا من العنصر الأخ الذي يليه وحتى العنصر المطابق بوساطة المحدِّد أو عقدة DOM أو كائن jQuery (دون أن يدخل هذا العنصر ضمن المجال).
.nextUntil( [selector ] [, filter ] )
أُضيف مع الإصدار: 1.4.
selector
سلسلة نصية تحتوي على تعبير محدِّد يشير إلى مكان توقف مطابقة العناصر الأخوة التالية.
filter
سلسلة نصية تحتوي على تعبير محدِّد يطابق العناصر.
.nextUntil( [element ] [, filter ] )
أُضيف مع الإصدار: 1.6.
element
عقدة DOM أو كائن jQuery يشير إلى مكان توقف مطابقة العناصر الأخوة التالية.
filter
سلسلة نصية تحتوي على تعبير محدِّد يطابق العناصر التي عُثر عليها.
عند إعطاء التابع .nextUntil() تعبير محدِّد يمثل مجموعة عناصر DOM، فسيبحث عن العناصر الإخوة لهذه العناصر في شجرة DOM ويتوقف عندما يصل إلى عنصر تطابق مع وسيط التابع المعطى (دون أن يشمله ضمن العناصر المعادة) ثمَّ ينشئ بعدئذٍ كائن jQuery جديد يحتوي على العناصر التي وجدها.
إن لم يتطابق المحدِّد مع أي عنصر أو لم يمرَّر، فستُحدِّد جميع العناصر الأخوة اللاحقة؛ وتكون هذه العناصر مماثلة تمامًا للعناصر الي يحدِّدها التابع .nextAll() عندما لا يمرَّر إليه أي محدِّد مرشح.
بدءًا من الإصدار jQuery 1.6، يمكن تمرير عقدة DOM أو كائن jQuery إلى التابع .nextUntil() بدلًا من محدِّد.
يقبل التابع اختياريًّا تعبير محدِّد كوسيطٍ ثانٍ. إن أعطي هذا الوسيط، فستُرشَّح العناصر التي عثر عليها عبر التحقُّق منها إن كانت تطابق تعبير المحدِّد هذا أم لا.
أمثلة
إيجاد العناصر الأخوة التي تلي العنصر <dt id="term-2"> وحتى العنصر الذي يلي <dt> وتغيير لون خلفيتها إلى الأحمر. إيجاد العناصر الأخوة للعنصر <dd> أيضًا التي تلي العنصر <dt id="term-1"> وحتى العنصر <dt id="term-3"> وتغيير لون النص الخاص بها إلى الأخضر:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>nextUntil مثالٌ عن استعمال التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<dl>
<dt id="term-1">مصطلح 1</dt>
<dd>تعريف 1-أ</dd>
<dd>تعريف 1-ب</dd>
<dd>تعريف 1-ج</dd>
<dd>تعريف 1-د</dd>
<dt id="term-2">مصطلح 2</dt>
<dd>تعريف 2-أ</dd>
<dd>تعريف 2-ب</dd>
<dd>تعريف 2-ج</dd>
<dt id="term-3">مصطلح 3</dt>
<dd>تعريف 2-أ</dd>
<dd>تعريف 2-ب</dd>
</dl>
<script>
$( "#term-2" )
.nextUntil( "dt" )
.css( "background-color", "red" );
var term3 = document.getElementById( "term-3" );
$( "#term-1" )
.nextUntil( term3, "dd" )
.css( "color", "green" );
</script>
</body>
</html>