التابع .slice() في jQuery
.slice( start [, end ] )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يقلِّص هذا التابع مجموعة العناصر المطابقة إلى مجموعة فرعيَّة موجودة في مجال محدَّد.
.slice( start [, end ] )
أُضيف مع الإصدار: 1.1.4.
start
عدد صحيح يمثل مؤشرًا صفريًا (0-based index) يشير إلى موقع العنصر الذي يبدأ عنده مجال المجموعة الفرعيَّة. إن كانت قيمته سالبة، فسيشير إلى موقع العنصر الذي يمثِّل بداية المجال ولكن بدءًا من نهاية المجموعة.
end
عددٌ صحيحٌ يمثِّل فهرسًا صفريًا (0-based index) يشير إلى موقع العنصر الذي ينتهي عنده مجال المجموعة الفرعيَّة. إن كانت قيمته سالبة، فسيشير إلى موقع العنصر الذي يمثِّل بداية المجال ولكن بدءًا من نهاية المجموعة. إن لم يعطَ، فسينتهي المجال عند نهاية المجموعة المطابقة.
إن استعملنا التابع .slice() مع كائن jQuery يمثَّل مجموعة من عناصر DOM، فسينشئ كائن jQuery جديد ويضع فيه مجموعة العناصر الفرعية التي يُحدَّد مجالها وسيط البداية start ووسيط النهاية end الاختياري. يشير الفهرس start إلى موقع العنصر الأول من المجال المراد تحديده في المجموعة؛ وإن لم يعطَ الفهرس end الذي يشير إلى موقع العنصر الأخير من ذلك المجال، فستُحدَّد جميع العناصر التي تلي العنصر الأول ذي الفهرس start.
بفرض أنَّ لدينا صفحة تحتوي على قائمة بسيطة مثل:
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
<li>العنصر الرابع</li>
<li>العنصر الخامس</li>
</ul>
يمكننا تطبيق هذا التابع مثلًا على عناصر القائمة تلك بالشكل:
$( "li" ).slice( 2 ).css( "background-color", "red" );
نتيجة تنفيذ هذا السطر من الشيفرة هو تغيير لون خلفية العنصر الثالث والرابع والخامس إلى الأحمر. انتبه إلى أن الفهرس المعطى هو فهرس صفري (zero-based index) يشير إلى موقع عنصر ضمن كائن jQuery وليس ضمن شجرة DOM.
يسمح لنا الوسيط end بتقليص مجال العناصر المحدَّدة عبر تحديد نهاية للمجال. انظر مثلًا السطر التالي:
$( "li" ).slice( 2, 4 ).css( "background-color", "red" );
سيُحدَّد في هذه الحالة العنصر الثالث والرابع فقط. انتبه أيضًا إلى أنَّ الفهرس صفري ويشير إلى العنصر الذي يمثل نهاية المجال المراد تحديده ولكن لا يدخل هذا العنصر ضمن مجال العناصر المحدَّدة.
الفهارس ذات القيمة السالبة
أنشئ التابع .slice() بعد التابع .slice() في JavaScript الخاص بالمصفوفات. إحدى الميزات التي استقاها منه هي إمكانيَّة تمرير أعداد سالبة واستعمالها مع الوسيط start أو الوسيط end. إن أعطي عدد سالب، فهذا يشير إلى أنَّ عمليَّة عدِّ العناصر ستبدأ من نهاية المجموعة وليس من بدايتها. انظر مثلًا إلى السطر التالي:
$( "li" ).slice( -2, -1 ).css( "background-color", "red" );
في هذه الحالة، سيتغير لون خلفية العنصر الرابع فقط إلى الأحمر بما أنَّه العنصر الوحيد الواقع ضمن المجال الذي يتراوح بين العنصر ذي الفهرس 2 من النهاية (وهو العنصر الثالث) والعنصر ذي الفهرس 1 من النهاية (وهو العنصر الرابع ولا يدخل ضمن المجال).
أمثلة
استعمال قيم عشوائية مع التابع .slice() لتغيير لون العناصر <div> إلى الأصفر:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slice مثالٌ عن استعمال التابع</title>
<style>
div {
width: 40px;
height: 40px;
margin: 10px;
float: left;
border: 2px solid blue;
}
span {
color: red;
font-weight: bold;
}
button {
margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button>اختر مجالًا عشوائيًّا</button>
<span>اضغط على الزر لتوليد مجال عشوائي</span></p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
function colorEm() {
var $div = $( "div" );
var start = Math.floor( Math.random() * $div.length );
var end = Math.floor( Math.random() * ( $div.length - start ) ) +
start + 1;
if ( end === $div.length ) {
end = undefined;
}
$div.css( "background", "" );
if ( end ) {
$div.slice( start, end ).css( "background", "yellow" );
} else {
$div.slice( start ).css( "background", "yellow" );
}
$( "span" ).text( "$( 'div' ).slice( " + start +
(end ? ", " + end : "") +
").css( 'background', 'yellow' );" );
}
$( "button" ).click( colorEm );
</script>
</body>
</html>
تحديد جميع الفقرات ثمَّ تقليص هذا التحديد ليشمل العنصر الأول فقط:
$( "p" ).slice( 0, 1 ).wrapInner( "<b></b>" );
تحديد جميع الفقرات ثمَّ تقليص هذا التحديد ليشمل العنصر الأول والثاني:
$( "p" ).slice( 0, 2 ).wrapInner( "<b></b>" );
تحديد جميع الفقرات ثمَّ تقليص هذا التحديد ليشمل العنصر الثاني فقط:
$( "p" ).slice( 1, 2 ).wrapInner( "<b></b>" );
تحديد جميع الفقرات ثمَّ تقليص هذا التحديد ليشمل العنصر الثاني والثالث:
$( "p" ).slice( 1 ).wrapInner( "<b></b>" );
تحديد جميع الفقرات ثمَّ تقليص هذا التحديد ليشمل العنصر الثالث فقط:
$( "p" ).slice( -1 ).wrapInner( "<b></b>" );