[英]Run one jQuery function on multiple elements with the same class
我在两个或多个元素上运行一个jquery函数时遇到问题。 它可以在HTML代码中的第一个元素上正常运行,但不能在其他元素上正常运行。
我有这个jQuery的:
$(window).load(function(){
$('.background_square_1 li.bg_square').hide();
function rotate() {
$(".background_square_1 li.bg_square").first().appendTo('.background_square_1').fadeOut(500);
$(".background_square_1 li.bg_square").first().fadeIn(500);
setTimeout(rotate, 10000);
}
rotate();
});
像这样的HTML:
<ul class="background_square_1 gallery_background">
<li class="bg_square bg_1"></li>
<li class="bg_square bg_2"></li>
<li class="bg_square bg_3"></li>
<li class="bg_square bg_4"></li>
</ul>
<ul class="background_square_1 gallery_background">
<li class="bg_square bg_1"></li>
<li class="bg_square bg_2"></li>
<li class="bg_square bg_3"></li>
<li class="bg_square bg_4"></li>
</ul>
基本上,我要达到的目的是在两个(但可以更多!)具有background_square_1类的ul元素上运行该函数。
说实话,我不使用javascript或jQuery,因此请记住这一点。
这是Fiddle显示我的问题: http : //fiddle.jshell.net/bWHPg/
只需直接针对该课程。 所以举个例子
$(".gallery_background").function()
或者,如果函数不能那样调用,而您想用其他方法处理每个元素,则可以执行
$(".gallery_background").each(function(index, item){
var elm = $(this);
... Do stuff ...
})
我本可以以错误的方式获取索引和项目,但您知道了:)
将您的代码包装在document.ready而不是window.load中
$(function() {
//jQuery code here
});
只要在您的代码中删除.first(),您的代码就可以正常工作
在这里工作的小提琴: http : //fiddle.jshell.net/bWHPg/2/
http://fiddle.jshell.net/bWHPg/5/
setInterval(function() {
$('.background_square_1').find('li:first')
.fadeOut(500)
.next()
.fadeIn(500)
.next()
.fadeIn(500)
.end()
.appendTo(".background_square_1");
}, 500);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.