Використовуйте .splice () на об'єкті JQuery - javascript, jquery

Видаляємо дитину певного html наскрізний елемент JQuery через:

$(PARENT_SELECTOR).children(CHILD_SELECTOR).remove()

Але як я можу зробити це поводження .splice() способу (наприклад, видалення на DOM дерево заданого індексу і зміщення). Наприклад:

1. Видаліть останніх трьох дітей. Тут я, ймовірно, скористаюся:

   for(var x = 0; x < 3; x++) {
   $(PARENT_SELECTOR).children().last().remove()
   }
   

2. Видаляйте дітей з 4-го по 6-те. Тут я використовую:

   $(PARENT_SELECTOR).children().eq(3).remove()
   $(PARENT_SELECTOR).children().eq(4).remove()
   $(PARENT_SELECTOR).children().eq(5).remove()
   

3. Видаліть 5 елементів, починаючи з 5-ої дитини (це реальний сценарій, де я хочу мати a .splice()- подібна функція для JQuery ):

   var starting = 5,
   index = 5
   
   // I haven"t tested this yet.
   for(var x = index + starting; x > index; x--) {
   $(PARENT_SELECTOR).children().eq(x - 1).remove()
   }
   

І список продовжується ... Я можу зробити свої власні сценарії для кожного сценарію [, це просто]. Мені просто цікаво, якщо JQuery вже має власну функцію, подібну до цієї - вона зробить мої сценарії коротшими і не змусить мене повторювати написання аналогічних кодів.

Відповіді:

Я думаю $ .slice це те, що ви шукаєте. Нижче наведено приклад:

<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, 4 ).remove();

Просто майте на увазі, що .slice() починається з індексу 0, тому приклад вище буде вилучити третього - п'ятого дитини.

JQuery Slice Метод вибирає підмножину елементів на основі йогоіндекс. Цей метод використовується для обмеження вибору елементів у групі, початкової та кінцевої точки: параметр start - це початковий індекс (починається з 0), з якого створюється підмножина, а параметр stop - необов'язкова кінцева точка. Ви можете знайти краще пояснення тут і тут

$(document).ready(function(){
$("p").slice(1).css("background-color", "red");
$("p").slice(2,4).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>para 0.</p>
<p>para 1.</p>
<p>para 2.</p>
<p>para 3.</p>
<p>para 4.</p>