Как найти предыдущий элемент в не блока (jquery)?

Question

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

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

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

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

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

БЛОГ НА HUSL

Как найти предыдущий элемент в не блока (jquery)?

Ответы (1 шт):