Question

我有两个名为.nav-previous和.nav-next的div 我想要做的是在.nav-previous和.nav-next处.nav-next位置.nav-previous {/ 1}}。

我试过这个：

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>

Answer 1

您可以使用.insertAfter() / .after()

等各种方法

＆＃13;

$(".nav-previous").insertAfter($('.nav-next'))
//$(".nav-previous").appendTo('.nav-links')
//$(".nav-next").after($('.nav-previous'))

＆＃13;

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

＆＃13;

Answer 2

也许复制他们的HTML？

var temp=$(".nav-previous").html();
$(".nav-previous").html($(".nav-next").html());
$(".nav-next").html(temp);

Answer 3

当你说切换时，你想要这样的东西吗？

＆＃13;

$('.nav-previous').insertAfter('.nav-next');

＆＃13;

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

＆＃13;

Answer 4

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()并将其附加到另一个元素{{} 1}}。即div。我们给我们想要附加到id（.appendTo("#target");）的div，以便我们可以从我们的js脚本中找到它。

Answer 5

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

Answer 6

第1步：

获取导航的html内容，然后导航。

var navPrev =$(".nav-previous").html();
var navNext = $(".nav-next").html();

第2步：

将导航器设置为导航器，然后导航到导航器。

$(".nav-previous").html(navNext);
$(".nav-next").html(navPrev);

希望它有所帮助。

使用jQuery克隆另一个div中的div

6 个答案: