.slice()

.slice( start [, end ] ) Dönen değer: jQuery Nesnesi
Açıklama : Bulunulan set'i indislerle belirtilen aralığa indirger.

.slice( start [, end ] ) Eklendiği Versiyon 1.1.4
start
Tip : Tamsayı
Elemanların seçilmeye başlanacağı index'i belirten sıfır temelli değer. Eksi değer olursa sondan geri sayılacaktır.
end
Tip : Tamsayı
Elemanların seçiminin bitirileceği index'i belirten sıfır temelli değer. Eksi değer olursa sondan geri sayılacaktır. Eğer verilmezse başlangıçtan en son dahil tüm elemanlar seçilir.

DOM elemanlarından oluşan bir jQuery nesnesi verildiğinde, .slice() metodu start ve end ile belirtilen aralıktaki indexlerdeki elemanlardan oluşan jQuery nesnesi döner. Girilmesi gereken start ile belirtilen indexli elemandan eçim başlar, end verilmişse o index elemana kadar elemanlar seçilir.

Basit bir listemiz olsun.

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Bu listeye metodumuzu uygulayarak elemanlarda değişiklik yapabiliriz.

$( "li" ).slice(2,4).css( "background-color", "red" );
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

Index 2 ve 3 seçildi 4 ise seçilmedi.


negatif indexler

JQuery .slice() metodu JavaScript'in array'ler için olan slice() metoduna benzer. Negatif indexler verilirse sondan başa doğru geri sayılır.

$( "li" ).slice(-2, -1).css( "background-color", "red" );
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5


Örnekler:

Rastgele bir şekilde <div> elemanların arka renklerini sarı yapar.

<style>
   div {
      width: 40px; height: 40px;
      margin: 10px; float: left;
      border: 2px solid blue;
   }
   span {
      color: red;
      font-weight: bold;
   }
   button { margin: 5px; }
</style>
<p><button>Parçaları sarı yap</button>
   <span>Butona tıkla!</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" ).on( "click", colorEm );
</script>

Butona tıkla!


Tüm paragrafları seç, sonra ilkini slice ile seç.

$( "p" ).slice( 0, 1 ).wrapInner( "<b></b>" );

Tüm paragrafları seç, sonra ilk ikisini slice ile seç.

$( "p" ).slice( 0, 2 ).wrapInner( "<b></b>" );

Tüm paragrafları seç, sonra sadece ikinciyi slice ile seç.

$( "p" ).slice( 1, 2 ).wrapInner( "<b></b>" );

Tüm paragrafları seç, sonra ikinciyi ve sonrakileri slice ile seç.

$( "p" ).slice( 1 ).wrapInner( "<b></b>" );

Tüm paragrafları seç, sonra son elemanı slice ile seç.

$( "p" ).slice( -1 ).wrapInner( "<b></b>" );

.

.