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

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

javascript jquery

Javascript 使用正确的Jquery选择器在div之间迁移内容,javascript,jquery,append,each,Javascript,Jquery,Append,Each,我被困在这里，需要帮助。我试图在单击某个特定主题的特定标题时，将其隐藏的div内容迁移到一个单独的区域。此时，我可以让内容迁移，但不是特定的主题内容，而是在单击时循环浏览内容对不起，我的标题不好，我正在努力定义我的确切问题。如果你觉得你能做得更好，请改变单击灰色字幕将迁移内容先谢谢你 Jquery: $(document).ready(function() { $(".freemarker-wrap div").hide(); $(".test").click(funct

我被困在这里，需要帮助。我试图在单击某个特定主题的特定标题时，将其隐藏的div内容迁移到一个单独的区域。此时，我可以让内容迁移，但不是特定的主题内容，而是在单击时循环浏览内容

对不起，我的标题不好，我正在努力定义我的确切问题。如果你觉得你能做得更好，请改变

单击灰色字幕将迁移内容

先谢谢你

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>


自由标记+
Lucene Call>
单击以隐藏故事
数组>
阵列
声明和输出变量>
宣布
如果语句>
声明
片段>
碎片
使用数字>
数字
当前日期>
当前
JavaScript+
JQuery+
HTML+
CSS+

假设这是您的要求

$(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
 });
});

$（文档）.ready（函数（）{
$（“.freemarker wrap div”）.hide（）；
$（“.test”）。单击（函数（）{
var working=$（this.find（“.freemarker”）.html（）；//获取特定的html
$（“.content box”）.html（工作）；假设这是您的要求
$(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
 });
});

$（文档）.ready（函数（）{
$（“.freemarker wrap div”）.hide（）；
$（“.test”）。单击（函数（）{
var working=$（this.find（“.freemarker”）.html（）；//获取特定的html
$（“.content box”）.html（正常工作）；我觉得你把它复杂化了；）
我认为你把事情复杂化了；）
很好，比我快；）+1很好，比我快；）+1@YogeshWaran我喜欢使用contents（）函数的这种方式，但当主题返回到菜单时，内容不再隐藏。是否可以编写jquery以便在离开“content box”后再次隐藏它？@YogeshWaran我喜欢使用contents（）的这种方式函数，但当主题返回菜单时，内容不再隐藏。是否可以编写jquery以便在离开“内容框”后再次隐藏它？