使用正确的 Jquery 选择器在 div 之间迁移内容答案

【问题标题】：Using the correct Jquery selectors to migrate content between divs使用正确的 Jquery 选择器在 div 之间迁移内容
【发布时间】：2013-01-05 14:52:15
【问题描述】：

主要卡在这里，希望得到一些帮助。当单击特定标题时，我正在尝试将特定主题的隐藏 div 内容迁移到单独的区域。此刻我可以迁移内容，但不是特定主题内容，它只是在单击时循环浏览内容。

对不起，我的标题很差，我正在努力定义我的确切问题。如果您觉得可以做得更好，请更改。

http://jsfiddle.net/vBCs5/1/

单击灰色字幕会迁移内容。

提前谢谢你。

Jquery：

$(document).ready(function() {

   $(".freemarker-wrap div").hide();

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

      $(".freemarker").each(function () {

        var working = $(this).contents();
        var ref = $(".content-box").contents();

        $(this).append(ref);
        $(".content-box").append(working);

   });
  });
});

HTML

<html>
<body>

<div class="page-wrap">
<div class="left-column-wrap">

<h1>FreeMarker +</h1>
<div class="freemarker-wrap">
    <span class="test">
        <h2>Lucene Call ></h2>
        <div class="freemarker">
        <p>Click to hide stories</p>
    </div>
</span>

<span class="test">
    <h2>Arrays ></h2>
    <div class="freemarker">
        <p>Arrays</p> 
    </div>
</span>

<span class="test">
<h2>Declaring and outputting variables ></h2>
    <div class="freemarker">
        <p>Declaring</p> 
    </div>
</span>

<span class="test">
    <h2>IF Statements ></h2>
    <div class="freemarker">
        <p>Statements</p>  
    </div>
</span>

<span class="test">
    <h2>Fragments ></h2>
    <div class="freemarker">
        <p>Fragments</p>
    </div>
</span>

<span class="test">
    <h2>Working with Numbers ></h2>
    <div class="freemarker">
        <h3>Numbers</h3>        
    </div>
</span>

<span class="test">
     <h2>Current Date ></h2>
     <div class="freemarker">     
        <p>Current</p>
     </div>
     </span>
 </div>

 <div class="javascript-wrap">
<h1>JavaScript +</h1>
 </div>

 <div class="javascript-wrap">
<h1>JQuery +</h1>
 </div>

 <div class="javascript-wrap">
<h1>HTML +</h1>
 </div>

 <div class="javascript-wrap">
<h1>CSS +</h1>
 </div>

 </div>

 <div class="content-box">
 </div>

</div>

</body>
</html>

【问题讨论】：

@YogeshWaran 我喜欢这种使用 contents() 函数的方式，但是当主题返回菜单时，内容不再隐藏。是否可以编写 jquery 使其在离开“内容框”后再次隐藏？

标签： javascript jquery append each

【解决方案1】：

假设这是您的要求...

$(document).ready(function() {

  $(".freemarker-wrap div").hide();
  $(".test").click(function () {
    var working=$(this).find(".freemarker").html(); // get that particular <span> html
    $(".content-box").html(working); <migrate it to content
 });
});

fiddle这里

【讨论】：

很好，快点打败我吧 ;) +1

【解决方案2】：

我认为你把事情复杂化了；）

$(document).ready(function() {

  $(".freemarker-wrap div").hide();

  $("span.test").click(function () {
      $(".content-box").html( $(this).find("div.freemarker").html() );
    });

 });

【讨论】：