1

修正できないように見えるコードの一部があります。関数を反復処理しない場合、またはクローンを作成しない場合は、すべて正常に機能します。それらを組み合わせると、divの構造がスクランブルされます。

コードの前に、私は次のように始めます。

<div class="origin"></div>

次に、htmlを追加するスクリプトを記述します。これは、次のように構成する必要があります。コード：

<div id="id0">
  <div class="scroller">
    <div class="origin"></div>
  </div>
  <a href="#"></a>
</div>
<div class="viewport"></div>
<div id="id1">
  <div class="scroller">
    <div class="origin"></div>
  </div>
  <a href="#"></a>
</div>
<div class="viewport"></div>

正常に開始しますが、以下の2行のコメントを外すと、IDを持つ2番目のdivは、「origin」にラップされるのではなく、前のビューポート内に表示されます。各「オリジン」内から独自のビューポート内（画像上に2つの周囲のdivがある）に画像とおそらくキャプションをコピーしようとしています。

コード：

function writeGallery(i) {
    var startDiv = $("div.origin:eq("+i+")");
    startDiv.wrap('<div class="scroller"></div>');  
    startDiv.parent().wrap ('<div id="id' + i + '" />');
    var horizThumbwrap      = startDiv.parent().parent();
    horizThumbwrap.append ('<a href="#"></a>');
    horizThumbwrap.after ('<div class="viewport" />');

    //var horizViewport        = startDiv.parent().parent().next(".viewport");
    //startDiv.clone().appendTo(horizViewport);
}

$(document).ready(function(){

$("div.origin").each(function(index) {
writeGallery (index);
});

$('#result').text($('#container').html());
});

ここにあるフィドルのコード（2行のコメントを外して混乱を確認してください）：http：//jsfiddle.net/AjSnx/

私が考えることができる唯一のことは、それをさまざまな方法で書き直して、うまくいくものにぶつかることを願っています。しかし、これは私の最初のjQueryプロジェクトなので、ここでも私が間違ったことを理解したいと思います。

誰か助けてもらえますか？ありがとう！

4

3 に答える 3

0

完全に逆になっていない場合は、origin-divのコンテンツをviewport-divに配置しようとしています。ここでoriginはstartDivですよね？

何かを複製する必要はないかもしれません。ビューポートのinnerHTMLを元のinnerHTMLで埋めるだけかもしれません。

startDiv.closest('.viewport').html( startDiv.html() );

それはあなたのために働きますか？

于 2012-07-14T14:35:12.067 に答える
0

.origin各ループ内で、を使用して要素を選択しています:eq()。ただし、各ループで別のを作成します<div class="origin" />。したがって、次のループでは、最初から存在していたものではなく、使用し<div>て作成したものを選択しています。これを修正するには、によって呼び出される関数に渡される2番目の引数を使用します。これには、最初に一致した現在の要素（つまり、ループ内で使用する予定の要素）が含まれています。.clone()<div>.each()

詳細については、私のアップデートをご覧ください。生成されるHTMLは次のとおりです。

<div id="id0">
    <div class="scroller">
        <div class="origin"></div>
    </div>
    <a href="#"></a>
</div>
<div class="viewport">
    <div class="origin"></div>
</div>

<div id="id1">
    <div class="scroller">
        <div class="origin"></div>
    </div>
    <a href="#"></a>
</div>
<div class="viewport">
    <div class="origin"></div>
</div>
于 2012-07-14T14:35:45.357 に答える
0

別の方法として、これを試すことができます：

   $("div.origin").each(function(i) {
       $(this).wrap('<div id="id'+i+'><div class="scroller"></div></div>')
       $(this).after('<a href="#"></a><div class="viewport"></div>')     
   });

http://jsfiddle.net/AjSnx/3/

于 2012-07-14T15:02:56.160 に答える