jQuery循環遍歷每個li並檢查一個類

Question

我試圖做一些簡單的jQuery，但很難。我想通過每個li元素做以下

1. 循環，並檢查它是否已經應用了特定類的時間表，倒'

2. 如果我在尋找類上慄存在那麼我想申請一些其它類「可見動畫fadeInRight」

3. 如果該類不存在，那麼我想申請一個替代類的可視動畫fadeInLeft'

這裏是我迄今爲止...

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 
     }); 
    } 
}); 

如果李項具有時間軸反轉類我希望它從飛正確的，如果它沒有時間線倒立的課，我希望它從左邊飛入！

感謝保羅

*編輯 - 此代碼爲我工作:)

$(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(){..});和使用$(this)代替$('.timeline li')。

$(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

你並不需要使用each()。你可以像下面這樣做。

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