jQuery遍历每个li并检查一个类 [英] jQuery Looping through each li and checking for a class

问题描述

我试图用jQuery做一些简单的事情，但是很难。我想做以下操作：

1. 循环遍历每个li元素并检查是否应用了特定的类'timeline-inverted '




2. 如果我正在寻找的类存在于li上，那么我想应用一些更进一步的类'可见的动画fadeInRight'




3. 如果该类不存在，那么我想要应用一个替代类'可见动画fadeInLeft'

这是我到目前为止...

HTML输出

 < ul class =timeline> 
< li class =hidden> 
< div class =timeline-image> 
 < / div> 
< div class =timeline-panel> 
< div class =timeline-heading> 
< h4> 2009-2010< / h4> 
< h4 class =subheading>我们卑微的起点< / h4> 
< / div> 
< div class =timeline-body> 
 
 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><！ -  /时间轴项目 - > 
 

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项目具有时间轴倒置的课程，我希望它从右侧飞入，如果它没有时间线倒立的类，我希望它从左边飞入！

感谢保罗

*编辑 - 此代码适用于我：）

  $（function（）{
 $（'。timeline li '）.each（function（）{
 if（$（this）.hasClass（timeline-inverted））{
 $（this）.removeClass（hidden）。viewportChecker（{ b $ b classToAdd：'visible animated fadeInRight'，offset：100 
}）; 
 
} else {
 $（this）.removeClass（hidden）。viewportChecker {
 classToAdd：'visible animated fadeInLeft'，offset：100 
}）; 
} 
}）; 
}）; 
  

解决方案

c> $（function（）{..}）; 并使用 $（this）来代替 $（' （$）$（$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' （（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
}）;
}
}）;
}）;


I'm trying to do something simple with jQuery 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 I'm looking for exists on the li then I would like to apply some further classes 'visible animated fadeInRight'

3. If the class doesn't exist, then 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
            });
        }
    });
});

解决方案

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

这篇关于jQuery遍历每个li并检查一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！