Question

我正在为应用程序构建样式指南。我有几个不同小部件的例子。我已经将每个html块作为一个片段＆＃34; snippet＆＃34;包装起来。我在每个示例小部件下面都有第二个空div，类为＃34;示例＆＃34;。我正在尝试使用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 “例”。我试图使用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 a p 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 a p 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

你的意思是这样吗？

＆＃13;

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

＆＃13;

<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 a p tag with a <a href="#">Link</a>
    </p>
  </div>
</div>
<div class="example">
</div>

＆＃13;

更精细的是，您可以使其更具动态性：在每个代码段后生成.example，并使用前面代码段中的代码填充它。

＆＃13;

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

＆＃13;

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

＆＃13;

<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 a p 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 a p tag with a <a href="#">Link</a> and guess what, even a
      <textarea disabled>I like turtles</textarea>
    </p>
  </div>
</div>

＆＃13;

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>

jQuery：如何选择所有div特定的类，并将div中的所有内容追加到一个新的div

5 个答案: