jQuery循环遍历每个li并检查一个类
jQuery Looping through each li and checking for a class
我试图用jQuery做一些简单的事情,但遇到了困难。我想做以下
-
循环遍历每个li元素,并检查它是否有应用了"时间轴反转"的特定类
-
如果我要查找的类存在于li上,那么我想应用一些进一步的类"可见动画fadeInRight"
-
如果这个类不存在,那么我想应用一个替代类"visible animatized 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
});
}
});
如果li项目有时间轴倒置类,我希望它从右边飞进来,如果它没有时间轴倒置的类,我想它从左边飞进来!
感谢paul
*编辑-此代码适用于我:)
$(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
});
TRy this:将脚本放在$(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
});
}
});
});
相关文章:
- JS:检查URL中的参数,然后迭代一个参数为var的函数
- 将多个布尔检查简化为一个布尔检查
- 使用JavaScript只检查一个RequiredFieldValidator
- 循环以检查数组中的最后一个图像
- 如何建立一个网页,检查我的路由器网络接口是否可以访问
- 检查搜索结果是否存在多次如果是,则在Javascript中只显示一个结果
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- javascript window.location在检查firebug时给了我一个错误的url路径
- 如何检查一个字符串的所有字符是否都存在于另一个字符串中
- 尝试简化检查对象键是否为true并将其推送到另一个对象
- 从id标记中的文本进行检查,并将类添加到另一个标记中
- 我如何为列出的选项卡元素编写一个Protractor测试,它会检查它是否's是否处于活动状态
- 检查来自不同数组的两个元素的一个属性是否相等
- 检查一个元素是否有一个类与另一个类总是返回true
- 如果语句为true,则对一个或多个ng进行角度检查
- 有没有一种方法可以检查javascript以毫秒为单位执行一个函数需要多长时间
- 点击一个按钮,有没有一种方法可以检查Div内部的图像
- 编写一个检查 $(this) 的开关 #id 大小写
- Javascript 自定义函数,内部有一个检查 for 循环
- 如何制作一个“检查元素”的web扩展在一个网页中,并执行下面提到的步骤