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

Question

Majorly stuck here and would love some help. 主要是在这里，并希望得到一些帮助。 I am trying migrate the hidden div content of a particular topic to a separate area when it's specific title is clicked. 我正在尝试将特定主题的隐藏div内容迁移到单独区域时单击特定标题。 At the minute I can get the content to migrate but instead of the specific topic content it just cycles through the content upon clicking. 在那一刻，我可以获取要迁移的内容，但不是特定的主题内容，它只是在点击时循环浏览内容。

Sorry for my poor Title, I'm struggling to define my exact problem. 对不起我糟糕的标题，我很难定义我的确切问题。 Please change if you feel you can do better. 如果您觉得自己可以做得更好，请改变。

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

Clicking the grey subtitles migrates the content. 单击灰色子标题可迁移内容。

Thank you in advance. 先感谢您。

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

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

Answer 1

assuming this is what your are asking for... 假设这是你要求的......

$(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 here 在这里小提琴

Answer 2

I think you're over complicating it ;) 我认为你的结果太复杂了;）

$(document).ready(function() {

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

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

 });

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-01-22 11:39:15

解决方案2
2 2013-01-22 11:41:16

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-01-22 11:39:15

解决方案2 2 2013-01-22 11:41:16

解决方案1
2 已采纳 2013-01-22 11:39:15

解决方案2
2 2013-01-22 11:41:16