jQuery各liのループとクラスのチェック

Question

jQueryを使って単純なことをしようとしていますが、苦労しています。それは、特定のクラスが適用されているかどうかを「タイムライン反転」

は私が探しているクラスは、Li上に存在する場合、私は、各li要素によって、次の

1. ループを実行し、チェックしたいと思いますその後、私はクラスが存在しない場合、私は別のクラスの目に見えるアニメーションfadeInLeft「

を適用するいくつかの更なるクラス「目に見えるアニメーションfadeInRight」

を適用したいと思いますここで

は、私がこれまで持っているものです...

HTML出力

<ul class="timeline"> 
    <li class="hidden"> 
     <div class="timeline-image"> 
      <img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt=""> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
       <h4>2009-2010</h4> 
       <h4 class="subheading">Our Humble Beginnings</h4> 
      </div> 
      <div class="timeline-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> 
      </div> 
     </div> 
    </li><!-- /timeline item --> 
    <li class="timeline-inverted hidden"> 
     <div class="timeline-image"> 
      <img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt=""> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
       <h4>March 2011</h4> 
       <h4 class="subheading">An Agency is Born</h4> 
      </div> 
      <div class="timeline-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> 
      </div> 
     </div> 
    </li><!-- /timeline item --> 
    <li class="hidden"> 
     <div class="timeline-image"> 
      <img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt=""> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
       <h4>July 2014</h4> 
       <h4 class="subheading">Phase Two Expansion</h4> 
      </div> 
      <div class="timeline-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> 
      </div> 
     </div> 
    </li><!-- /timeline item --> 
    <li class="timeline-inverted hidden"> 
     <div class="timeline-image"> 
      <img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt=""> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
       <h4>December 2014</h4> 
       <h4 class="subheading">Another great month</h4> 
      </div> 
      <div class="timeline-body"> 
       <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
      </div> 
     </div> 
    </li><!-- /timeline item --> 
    <li class="timeline-inverted"> 
     <div class="timeline-image"> 
      <h4> 
       Be Part 
       <br>Of Our 
       <br>Story! 
      </h4> 
     </div> 
    </li><!-- /.timeline --> 
</ul> 

のjQuery

$('.timeline li').each(function() { 
    if ($(this).hasClass("timeline-inverted")) { 
     $('.timeline li').removeClass("hidden").viewportChecker({ 
      classToAdd: 'visible animated fadeInRight', offset: 100 
     }); 

    } else { 
     $(this).removeClass("hidden").viewportChecker({ 
      classToAdd: 'visible animated fadeInLeft', offset: 100 
     }); 
    } 
}); 

のli項目は、私はそれからで飛びたいタイムライン反転クラスを持っている場合タイムラインを反転させたクラスを持っていれば、それは左から飛びたい！

おかげでポール

*編集 - あなたはeach()を使用する必要はありません。このコードは、私の作品:)

$(function() { 
    $('.timeline li').each(function() { 
     if ($(this).hasClass("timeline-inverted")) { 
      $(this).removeClass("hidden").viewportChecker({ 
       classToAdd:'visible animated fadeInRight', offset: 100 
      }); 

     } else { 
      $(this).removeClass("hidden").viewportChecker({ 
       classToAdd: 'visible animated fadeInLeft', offset: 100 
      }); 
     } 
    }); 
}); 

Answer 1

はこれを試してみてください。

$(function(){ 
    $('.timeline li').each(function() { 
     if ($(this).hasClass("timeline-inverted")) { 
      $(this).removeClass("hidden").addClass('visible animated fadeInRight').viewportChecker({ 
       offset: 100 
      }); 

     } else { 
      $(this).removeClass("hidden").addClass('visible animated fadeInLeft').viewportChecker({ 
       offset: 100 
      }); 
     } 
    }); 
}); 

Answer 2

。次のようにすることができます。 $(function(){..});内のスクリプトを入れて、$(this)の代わり$('.timeline li')を使用します。

$('.timeline li.timeline-inverted').removeClass("hidden").viewportChecker({ 
    classToAdd: 'visible animated fadeInRight', 
    offset: 100 
}); 

$('.timeline li').not('.timeline-inverted').removeClass("hidden").viewportChecker({ 
    classToAdd: 'visible animated fadeInLeft', 
    offset: 100 
});