0

Возможно вопрос немного странный, но когда покажу пример все станет понятно.

вот такая структура

   <div class="mainclass">
      <div class="bigitem">1</div>
      <div class="bigitem">2</div>
      <div class="bigitem">3</div>
      <div class="bigitem">4</div>
      <div class="bigitem">5</div>
    </div>
    <button>new</button>
    <div class="mainclass">
      <div class="bigitem">11</div>
      <div class="bigitem">22</div>
      <div class="bigitem test">33</div>
      <div class="bigitem">44</div>
      <div class="bigitem">55</div>
    </div>
    <button>new</button>
    <div class="last">xxx</div>

по нажатию на первую кнопку button нужно что бы после <div class="bigitem">5</div> клонировалась такая я же строка <div class="bigitem">5</div>

   <div class="mainclass">
      <div class="bigitem">1</div>
      <div class="bigitem">2</div>
      <div class="bigitem">3</div>
      <div class="bigitem">4</div>
      <div class="bigitem">5</div>
      <div class="bigitem">5</div>
    </div>

по нажатию на вторую кнопку button нужен вот такой результат

<div class="mainclass">
  <div class="bigitem">11</div>
  <div class="bigitem">22</div>
  <div class="bigitem test">33</div>
  <div class="bigitem">44</div>
  <div class="bigitem">55</div>
  <div class="bigitem">55</div>
</div>

Вот тут https://codepen.io/ctacua/pen/zYpyxaL я пробовал делать это с использованием .clone и .prevAll

$(function() {
  $('button').on('click', function(){
    console.log('button')
    let prev = $('button').prevAll('.bigitem').html()
    console.log(prev)
      
  })
})

Буду признателен за совет

1 ответ 1

1

Если я все правильно понял что вам нужно

$(function() {
  $('button').on('click', function(){
    let prev = $(this).prev();
    prev.append(
      prev
        .find('.bigitem:last-child')
        .clone()
    )      
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainclass">
  <div class="bigitem">1</div>
  <div class="bigitem">2</div>
  <div class="bigitem">3</div>
  <div class="bigitem">4</div>
  <div class="bigitem">5</div>
</div>
<button>new</button>
<div class="mainclass">
  <div class="bigitem">11</div>
  <div class="bigitem">22</div>
  <div class="bigitem test">33</div>
  <div class="bigitem">44</div>
  <div class="bigitem">55</div>
</div>
<button>new</button>
<div class="last">xxx</div>

8
  • да. спасибо. то что надо. но на реальном примере почему-то не работает codepen.io/ctacua/pen/zYpyxaL клонирует не весь элемент (без верхней обертки) <div class="row mt-3 mb-0 bigitem">
    – Stas
    18 апр 2022 в 5:04
  • @Stas у вас в "реальном" примере нет обертки-контейнера для записей как в тестовом class="mainclass". Поэтому в реальном примере запись вставляется внутрь предыдущей. 18 апр 2022 в 8:54
  • @Stas попробуйте сделать таким кодом: prev.clone().insertAfter(prev), чтобы получилось вот так 18 апр 2022 в 9:01
  • это понятно. но не понятно почему оно берет на уровень ниже. я же пишу .clone именно верхний уровень. по логике, тогда .parent().clone() должно брать на уровень выше, но выходит не так. в первом случае берет на уровень ниже, а с parent берет на уровень выше!
    – Stas
    18 апр 2022 в 9:02
  • @Stas если внимательно посмотреть. То ничего не вырезалось. Просто появлялась вложенность 18 апр 2022 в 9:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.