.slice()

.slice( start [, end ] )Возвращает: jQuery

Описание: Сокращает набор сопоставленных элементов до подмножества, указанного диапазоном индексов.

версия добавлена: 1.1.4.slice( start [, end ] )
- start
  
  Тип: Целое число
  
  Целое число, указывающее нулевую позицию, с которой начинаются выбранные элементы. Если отрицательное, указывает смещение от конца набора.
- end
  
  Тип: Целое число
  
  Целое число, указывающее нулевую позицию, на которой элементы перестают выбираться. Если отрицательное, указывает смещение от конца набора. Если опущено, диапазон продолжается до конца набора.

Учитывая объект jQuery, представляющий набор элементов DOM, метод .slice() создает новый объект jQuery, содержащий подмножество элементов, указанное start и, необязательно, end аргументом. Указанный start индекс определяет положение одного из элементов в наборе; если end опущен, все элементы после него будут включены в результат.

Рассмотрим страницу со списком:

<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>

Мы можем применить этот метод к набору элементов списка:

$( "li" ).slice( 2 ).css( "background-color", "red" );

Результат этого вызова — красный фон для элементов 3, 4 и 5. Обратите внимание, что указанный индекс нулевой, и относится к положению элементов внутри объекта jQuery, а не внутри дерева DOM.

Параметр end позволяет еще более ограничить выбранный диапазон. Например:

$( "li" ).slice( 2, 4 ).css( "background-color", "red" );

Теперь выбраны только элементы 3 и 4. Индекс снова нулевой; диапазон простирается до, но не включая, указанный индекс.

Отрицательные индексы

Метод jQuery .slice() моделирует метод JavaScript .slice() для массивов. Одна из функций, которую он имитирует, — возможность передачи отрицательных чисел в качестве start или end параметра. Если передано отрицательное число, это указывает на позицию, начиная с конца набора, а не с начала. Например:

$( "li" ).slice( -2, -1 ).css( "background-color", "red" );

На этот раз только элемент списка 4 становится красным, поскольку это единственный элемент в диапазоне между двумя с конца (-2) и одним с конца (-1).

Примеры:

Делает divs желтыми на основе случайного среза.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slice demo</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-3.7.0.js"></script>
</head>
<body>
 
<p><button>Turn slice yellow</button>
  <span>Click the button!</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>
 
</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>" );

.slice( start [, end ] )Возвращает: jQuery

версия добавлена: 1.1.4.slice( start [, end ] )

Отрицательные индексы

Примеры:

Демо: