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