jQuery：如何选择所有特定于div的类并将div中的所有内容附加到新的div

Question

我正在为应用程序构建样式指南。 我有几个不同小部件的示例。 我已经将每个要用作代码段的html块包装为“代码段”类。 我在每个示例小部件下方都有一个第二个空div，其类为“ example”。 我正在尝试使用jQuery选择带有代码段的所有html块，抓取div中的所有内容并将其插入空div（包装在pre和code标签中）。

请参见以下示例：

<div class="panel panel-default">
    <div class="snippet panel-body">
        <h1>H1 Header Example</h1>
        <h2>H2 Header Example</h2>
        <h3>H3 Header Example</h3>
        <h4>H4 Header Example</h4>
        <p>
            Here is a p tag with a <a href="#">Link</a>
        </p>
    </div>
</div>
<div class="example">
</div>

Answer 1

在每个示例小部件下方都有一个第二个空div，其类别为“ example”。 我正在尝试使用jQuery选择带有代码段的所有html块，抓取div中的所有内容并将其插入空div（包装在pre和code标签中）。

如果正确地解释问题，请尝试使用.each() .innerHTML ， textarea元素

 $(".example").each(function(i, el) { el.innerHTML = "<textarea style=width:400px;height:200px>" + $(".snippet")[i].innerHTML + "</textarea>" }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Header Example</h1> <h2>H2 Header Example</h2> <h3>H3 Header Example</h3> <h4>H4 Header Example</h4> <p> Here is ap tag with a <a href="#">Link</a> </p> </div> </div> <div class="example"> </div> 

---

如果渲染的html不被编辑，则可以将disabled属性添加到渲染textarea元素的字符串中

 $(".example").each(function(i, el) { el.innerHTML = "<textarea style=width:400px;height:200px disabled=true>" + $(".snippet")[i].outerHTML + "</textarea>" }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Header Example</h1> <h2>H2 Header Example</h2> <h3>H3 Header Example</h3> <h4>H4 Header Example</h4> <p> Here is ap tag with a <a href="#">Link</a> </p> </div> </div> <div class="example"> </div> 

Answer 2

您收到此错误的原因是因为[0]返回普通的Dom对象而不是jquery对象。

$('.snippet').each(function(i, item){ 
   $(item).next().text($(item).html());
  }
);

Answer 3

使用$('.example').html($('.snippet').html());

Answer 4

你的意思是这样吗？

 $(".example").append("<pre><code/></pre>"); $(".example code").html($(".snippet").html().replace(/</g, "&lt;").replace(/>/g, "&gt;")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Header Example</h1> <h2>H2 Header Example</h2> <h3>H3 Header Example</h3> <h4>H4 Header Example</h4> <p> Here is ap tag with a <a href="#">Link</a> </p> </div> </div> <div class="example"> </div> 

---

更详细地说，您可以使其更加动态：在每个代码段之后生成.example ，并使用前面代码段中的代码填充它。

 $(".snippet").each(function() { var $this = $(this), ex = $("<div></div>").addClass("example").html(function() { return "<pre><code>" + $this.html().replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</pre></code>"; }); $this.parent("div").after(ex); }); 

 .example { background: #ccc; text-shadow: 0 1px white; } .example pre {padding: 0;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Header Example</h1> <h2>H2 Header Example</h2> <h3>H3 Header Example</h3> <h4>H4 Header Example</h4> <p> Here is ap tag with a <a href="#">Link</a> </p> </div> </div> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Another Header Example</h1> <h2>H2 Something similarHeader Example</h2> <h3>H3 Bananas Header Example</h3> <p> Here is ap tag with a <a href="#">Link</a> and guess what, even a <textarea disabled>I like turtles</textarea> </p> </div> </div> 

Answer 5

在您的html文件顶部添加此链接

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

并在此代码的底部复制div内容并将其放在“ .example” div中

 <script>
  $(document).ready(function () {  
     $('.example').html($('.snippet').clone()); 
    //$('.panel  .snippet').remove(); // use this portion to remove the previous div
   });
</script>