Как получить следующий элемент в j-запросе?

Я пытаюсь заставить jQuery сделать это:

Когда я нажимаю кнопку, он выбирает элемент next() и клонирует его. Если я снова нажму кнопку, он выберет следующий элемент следующего элемента и клонирует его, и так далее ...

ДЛИННАЯ ИСТОРИЯ КОРОТКО ... Я щелкаю один раз, когда он клонирует "2", я щелкаю еще раз, он клонирует "3" и так далее ...

Что происходит не так и как я могу этого добиться?

var x = $(".show");
$(".button").click(function() {
  $(".first").next().clone(true, true).appendTo(x);
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
  <button class = "button">CLICK ME</button>
  <ul style = "position:relative; top:100px;">
    <div class = "test">
      <div class=first>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
</div>
<div class = "show"></div>

Где .show? Кстати, <li> имеет больше смысла в <ul>, чем в <div>. Если вам не нужны эти дурацкие пули, добавьте list-style:none в <ul> CSS.

— 04.07.2018 00:53

Также вы должны добавить закрывающий тег: </ul> к <ul>, чтобы закрыть его.

— 04.07.2018 00:59

Я получил базовый стиль, чтобы читатели не запутались в большом количестве кода ... сохраняя простоту

— 04.07.2018 01:36

Это достойно восхищения, но обратите внимание, что элементы <ul> могут содержать «ноль или более элементов <li>» и что «как начальный, так и конечный тег являются обязательными». - <ul> @ MDN.

— 04.07.2018 01:54

javascript jquery

04.07.2018 00:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я бы сделал что-то вроде этого:

var x = $(".show");
var count = 0;

$(".button").click(function() {

  var element = $(".first");
  count++;

  for (var i = 0; i < count; i++) {
    element = $(element).next();
  }

  $(element).clone(true, true).appendTo(x);

});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class = "container">
  <button class = "button">CLICK ME</button>
  <ul>
    <div class = "test">
      <div class=first>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
</div>
<div class = "show"></div>

04.07.2018 00:45

Эта демонстрация является функцией многократного использования (просто не забудьте объявить интервал (var i = 0) вне функции). Поскольку вы не указали, хотите ли вы клонировать большее количество заданных узлов, я добавил подтверждение, как только вы достигнете этого предела.

Демо

var i = 0;

$(".button").on('click', function() {
  dupeNode('.hide li', '.show');
});


function dupeNode(selector, TO) {
  if (i > $(selector).length - 1) {
    return msg.call(this);
  }
  $(selector).eq(i).clone(true, true).appendTo($(TO));
  i++;
}

function msg() {
  var m = confirm(`
Last item was already cloned.
[OK] to at the beginning or
[Cancel] to quit.`);
  var x = m ? i = 0 : false;
  return x;
}

ul {
  list-style: none;
}

li {
  display: inline-table;
}

li::after {
  content: "\2c\a0";
}

.show {
  visibility: visible
}

.hide {
  visibility: hidden
}

<main class = "container">
  <button class = "button">CLICK ME</button>
  <ul class='show'></ul>

  <ul class = "hide">
    <li class=first>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

</main>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

04.07.2018 02:45