0

HTML のデザインに疑問があります。<div> ... </div>固定位置にセクションがあります。タグ<div></div>内のどこでもそれを再利用したいと思います。body

innerhtml('...')、、、の方法でjQueryとJavaScriptを使ってみましafter('...')たappend('...')。それは機能しますが、100行の引用符ともう1つを説明したくありません。<div></div>それを複数回含めたいと思います。

サンプルコード形式。

<html>
<head>
....
</head>

<body>
...
   <div id='includes_div'>       <!-- It hides on form load -->
      ...
      ...     <!-- having 100 of lines -->
   </div>

   <div id='div1'>
       <!-- want to include here -->
      ...
   </div>


   <div id='div2'>
       <!-- want to include here -->
      ...
   </div>
</body>
</html>

jQueryまたはJavaScriptで可能ですか?

4

2 に答える 2

2

これを行うにはかなりの数の方法がありますが、以下は一般的に採用されている 2 つの方法です。

1 つ目は、jQuery の「clone()」メソッドを使用する方法です。

var toClone = $('#includes_div');
var cloneContainers = $('#div1, #div2');

cloneContainers.each(function() {
    var clonedDiv = toClone.clone();
    clonedDiv.attr('id', '');
    this.append(clonedDiv);   
});

これにより、元の div の正確なクローンが作成され、各コンテナーに配置されます。これは正確なクローンであるため、ID の競合を防ぐ必要があります。

もう 1 つの方法は、最初の div のコンテンツ全体ではなく、そのコンテンツのみを使用することです。

var content = $('#includes_div').html();
var containers = $('#div1, #div2');

containers.each(function() {
    this.append(content);   
});

明らかに、上記のコードはプロセスを分解するのに役立つように書かれています。両方をよりコンパクトな形式で書くことができます。

于 2013-03-30T13:35:10.613 に答える