javascript - jQuery循环遍历每个li并检查一个类

标签 javascript jquery html css

我正在尝试使用 jQuery 做一些简单的事情,但遇到了困难。我想做以下事情

  1. 遍历每个 li 元素并检查它是否应用了特定类“timeline-inverted”

  2. 如果我正在寻找的类存在于 li 上,那么我想应用一些进一步的类“visible animated fadeInRight”

  3. 如果该类不存在,那么我想应用一个替代类“visible animated 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> 

查询

$('.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({
                classToAdd:'visible animated fadeInRight', offset: 100
            });

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

最佳答案

您不需要使用 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
});

关于javascript - jQuery循环遍历每个li并检查一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36742023/

相关文章:

html - 如何在不获取所有 html 的情况下获取 TextEdit html 标签?

javascript - 如何防止在 iframe 中浏览时打开新选项卡或窗口

javascript - React Route - 从 JSON 对象中的字符串渲染路由中的组件

javascript - 链接功能作为 promise

jquery - 函数绑定(bind)和 clone() 函数 - Jquery

html - 如何在 Bootstrap 中使图像适合列

javascript - JQuery hide() 在 fadeIn() 之后不起作用

javascript - jquery每个带参数的循环调用函数

javascript - 替换除 - 、+ 和 之外的所有内容。

javascript - 如何检测 jquery Fade 动画是否正在进行?