0

スライダープロジェクトの場合、複製されたdiv内の子divに到達したいのですが、機能していないようです。

 <div class="slide">
  <div class='slidecaption'><h2>Slide Number 1</h2></div> 
 <div class='slidetext'><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p></div>
 </div> 

 <div class="slide"> 
  <div class='slidecaption'><h2>Slide Number 2</h2></div> 
 <div class='slidetext'><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p></div>
 </div> 

 <div class="slide"> 
  <div class='slidecaption'><h2>Slide Number 3</h2></div> 
 <div class='slidetext'><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
 </div>

現在、Jqueryコードは次のとおりです。

$(document).ready(function() { 
    var slides = $('.slide');   
    var firstclone = slides.eq(0).clone(true);
    var lastclone  = slides.eq(2).clone(true);

    slides.wrapAll('<div id="slideswrapper"></div>');
    firstclone.appendTo ("#slidesWrapper");
    lastclone.prependTo ("#slidesWrapper");
    var slidesNumber = slides.length;
 console.log(slidesNumber); //===> this will give 3 NOT 5
 console.log(slides); //===>this will give an object of only 3 divs
 console.log('#slidesWrapper'.html); //=====> this will give undefined 

});

コードをデバッグしても、コードでコメントされているように期待される結果は表示されません。さて、Jquery Documentationから理解したように、domに挿入されたクローンdivはdomの一部になるので、ここで正しく取得できないのは、5つのスライドまたは必要なhtmlを意味します。

.slideTextと.slideCaptionのコンテンツを取得して操作し、いくつかの効果を追加したいと思います。

4

1 に答える 1

2

要素を再選択する必要があります。

呼び出している時点var slides = $('.slide');では、実際には3つのスライドしかありません。

ただし、要素が挿入された後でセレクターを再度実行すると（console.log($('.slide').length);）、期待どおりに5が得られます。

また、コードにはタイプミスがあります。最も重要なのは、slidesWrapper！=slideswrapperです。

于 2013-03-14T01:19:52.700 に答える