Paul Paul - 7 months ago 33
Javascript Question

JQUERY Looping through each li and checking for a class

Im trying to do something simple with JQERY but having a hard time. I would like to do the following


  1. Loop through each li element and check whether it has a specific
    class applied 'timeline-inverted'

  2. If the class im looking for exists on the li then i would like to apply some further classes 'visible animated fadeInRight'

  3. If the class doesnt exist i want to apply an alternative class 'visible animated fadeInLeft'



Here is what i have so far...

HTML Output

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


If the li item has the timeline-inverted class i want it to fly in from the right and if it doesnt have the timeline-inverted class i want it to fly in from the left!

Thanks paul

*Edit - This code works for me :)

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

TRy this : put your script inside $(function(){..}); and use $(this) instead of $('.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
            });
        }
    });
});