如何获取j查询中的下一个元素？
如何获取j查询中的下一个元素？
提问于 2018-07-04 06:29:17
我正在尝试让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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-04 06:45:16
我会这样做：
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>
Stack Overflow用户
发布于 2018-07-04 08:45:22
这个Demo是一个可重用的函数(只需记住在函数外部声明间隔(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51163563
复制相关文章
相似问题