使用jQuery在另一个div中克隆一个div
[英]Clone a div in another div using jQuery
问题描述
我有2个分别称为.nav-previous和.nav-next div。我想要做的是将.nav-previous放在.nav-next的位置，并将.nav-next放在.nav-previous位置。
我已经尝试过了：
var p=$(".nav-previous");
$(".nav-previous") =$(".nav-next");
$(".nav-next")=p;
和这个：
var p=$(".nav-previous");
$(".nav-next").clone().appendTo(".nav-previous").html();
p.clone().appendTo(".nav-next").html();
这是我的HTML代码：
<nav class="navigation posts-navigation" role="navigation">
<h2 class="screen-reader-text">Navigazione articoli</h2>
<div class="nav-links">
<div class="nav-previous"><a href="linktopreviouspage.com" >Articoli meno recenti</a></div>
<div class="nav-next"><a href="linktonextpage.com" >Articoli seguenti</a></div>
</div>
</nav>
6 个解决方案
解决方案1
2 2017-06-27 09:22:00
您可以使用各种方法，例如.insertAfter() / .insertAfter() .after()
$(".nav-previous").insertAfter($('.nav-next')) //$(".nav-previous").appendTo('.nav-links') //$(".nav-next").after($('.nav-previous'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navigation posts-navigation" role="navigation"> <h2 class="screen-reader-text">Navigazione articoli</h2> <div class="nav-links"> <div class="nav-previous"><a href="linktopreviouspage.com" >Articoli meno recenti</a></div> <div class="nav-next"><a href="linktonextpage.com" >Articoli seguenti</a></div> </div> </nav>
解决方案2
1 已采纳 2017-06-27 09:23:01
也许复制他们的HTML？
var temp=$(".nav-previous").html();
$(".nav-previous").html($(".nav-next").html());
$(".nav-next").html(temp);
解决方案3
0 2017-06-27 09:23:54
当您说切换时，是否要这样？
$('.nav-previous').insertAfter('.nav-next');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navigation posts-navigation" role="navigation"> <h2 class="screen-reader-text">Navigazione articoli</h2> <div class="nav-links"> <div class="nav-previous"><a href="linktopreviouspage.com" >Articoli meno recenti</a></div> <div class="nav-next"><a href="linktonextpage.com" >Articoli seguenti</a></div> </div> </nav>
解决方案4
0 2017-06-27 09:25:41
HTML：
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").clone().appendTo("#target");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="target">
</div>
</body>
</html>
所以我们要做的是，在按钮上单击$("button").click(function() ，我们找到了要克隆的元素，将其克隆$("p").clone()并将其追加到另一个元素.appendTo("#target");即div。我们给我们要附加到id的div（ id="target" ），以便我们从js脚本中找到它。
解决方案5
0 2017-06-27 09:26:42
//Get references of parent divs var $navPrev = $('.nav-previous'); var $navNext = $('.nav-next'); //Get html contents of parent divs var navPrevHtml = $navPrev.html(); var navNextHtml = $navNext.html(); //Replace html contents of each parent with contents of the other $navPrev.html(navNextHtml); $navNext.html(navPrevHtml);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navigation posts-navigation" role="navigation"> <h2 class="screen-reader-text">Navigazione articoli</h2> <div class="nav-links"> <div class="nav-previous"><a href="linktopreviouspage.com">Articoli meno recenti</a></div> <div class="nav-next"><a href="linktonextpage.com">Articoli seguenti</a></div> </div> </nav>
解决方案6
0 2017-06-27 09:32:29
第1步：
获取上一个nav和下一个nav的html内容。
var navPrev =$(".nav-previous").html();
var navNext = $(".nav-next").html();
第2步：
将上一个导航设置为下一个导航，并将下一个导航设置为上一个导航。
$(".nav-previous").html(navNext);
$(".nav-next").html(navPrev);
希望能帮助到你。
如何使用JavaScript将div的内容克隆到另一个div中？
[英]How to clone the contents of a div into another div with JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.