jQuery - как добавить div в указанное c место в списке к существующему списку предметов с теми же классами (добавление)

Question

Привет, у меня есть список предметов. Я хотел бы добавить во внутреннюю часть списка один DIV для использования функции bootstrap развернуть / свернуть.

Я хотел бы добавить div после 3 элементов и указать ссылку на последнюю позицию в списке.

Проверьте теги комментариев в моем html коде, чтобы понять, куда вставить.

Спасибо !!

<div id="list">
        <div class="item">some content</div>
        <div class="item">some content</div>
        <div class="item">some content</div>

        <!-- there is place for new DIV (after 3 items) -->
        <div class="item">some content</div>
        <div class="item">some content</div>
        <div class="item">some content</div>
        <div class="item">some content</div>
        <!-- there is place for end DIV -->

        <!-- there is place for LINK (last position) -->
        <a href="" class="collapse show">Show</a>
        <!-- there is place end LINK -->
</div>

Answer 1

Хорошо, вам нужно обернуть содержимое, для обтекания вы можете сделать это следующим образом.

$('#list > div:nth-child(n+3)').wrapAll('<div></div>')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
        <div class="item">some content</div>
        <div class="item">some content</div>
        <div class="item">some content</div>

        <!-- there is place for new DIV (after 3 items) -->
        <div class="item">some content</div>
        <div class="item">some content</div>
        <div class="item">some content</div>
        <div class="item">some content</div>
        <!-- there is place for end DIV -->

        <!-- there is place for LINK (last position) -->
        <a href="" class="collapse show">Show</a>
        <!-- there is place end LINK -->
</div>

Answer 2

Я не знаю, правильно ли я вас понял. Вы хотите обернуть некоторые элементы div контейнером, чтобы скрыть их и показывать только, если была нажата ссылка?

// Add the collapse wrapper above the link
$('<div class="collapse-wrapper"></div>').insertAfter($("#list > .item").last());

// Loop through items
$('#list > .item').each(function(index){
    // Move all items after the third one to the collapse-wrapper
    if(index >= 3) {
        $(this).appendTo('#list .collapse-wrapper');
    }
});

Answer 3

<div class="container">
  <h2>Araba</h2>
  <div class="inner">Merhaba</div>
  <div class="inner">Gule gule</div>
</div>

Этот код также для добавления, где вы хотите

$( "<p>Deneme</p>" ).append( ".inner" );

Answer 4

Вы можете сделать что-то вроде этого:

$('<div class="item">Test</div>').insertAfter($("#list > .item").last());

Он вставит div с элементом класса перед последним элементом с элементом класса в элементе #list.

Answer 5

Как то так?

$('#list').append('<div class="item">some content</div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <div class="item">some content</div>
  <div class="item">some content</div>
  <div class="item">some content</div>

  <!-- there is place for new DIV (after 3 items) -->
  <div class="item">some content</div>
  <div class="item">some content</div>
  <div class="item">some content</div>
  <div class="item">some content</div>
  <!-- there is place for end DIV -->

  <!-- there is place for LINK (last position) -->
  <a href="" class="collapse show">Show</a>
  <!-- there is place end LINK -->
</div>