与prevAll的JQuery Selector问题

时间:2010-08-02 21:06:14

标签: jquery jquery-selectors

我无法使用一些Jquery代码。我认为我的问题源于我如何编写选择器。

这是我原来的HTML:

<div class="rotate"> 
<div class="offer-holder"><span class="lblSeconds">7</span></div>
<div class="offer-holder"><span class="lblSeconds">3</span></div></div>

...这是我的Jquery代码:

$("div.rotate div.offer-holder").hide().eq(1).show();
function rotate() {
    var i = $("div.rotate div.offer-holder:visible").prevAll("div").length + 1;
    i = i % $("div.rotate div.offer-holder").length;
    var speed = $("div.rotate div.offer-holder").fadeOut().eq(i).fadeIn().find('.lblSeconds').text();
    setTimeout("rotate()", (parseInt(speed) * 1000));
};
rotate();

这非常有效(在CSS中,提供者的位置设置为绝对,顶部:0px,左:0px)。顺便说一句,这是一个广告旋转器。所有div都相互重叠,然后逐个循环显示。

现在,我必须为另一个页面修改它,看起来像这样:

<div class="rotate">
 <div class="ob-offer-item rounded-corners clearfix">
  <div class="test">
   <div class="ob-offer-details">
    <div class="offer-holder"> XXX </div></div></div></div></div>

......这就是我的尝试:

$("div.rotate div.ob-offer-item div.test div.ob-offer-details div.offer-holder").hide().eq(1).show();
function rotate() {
    var i = $("div.rotate div.ob-offer-item div.test d div.ob-offer-details div.offer-holder:visible").prevAll("div").length + 1;
    i = i % $("div.rotate div.ob-offer-item div.test d div.ob-offer-details div.offer-holder").length;
    var speed = $("div.rotate div.ob-offer-item div.test d div.ob-offer-details div.offer-holder").fadeOut().eq(i).fadeIn().find('.lblSeconds').text();
setTimeout("rotate()", (parseInt(speed) * 1000));
};
rotate();

我怀疑我的问题是prevAll。它基本上隐藏了它之前的每个div(我想,这就是我告诉它要做的事情)。而不是基于lblSeconds值从一个广告到下一个广告的漂亮淡入淡出,它每秒都会不断闪烁。我不知道修复prevAll选择器路径的正确语法。我尝试了几种组合,但没有用。

欢迎任何帮助。

感谢。

斯蒂芬

1 个答案:

答案 0 :(得分:0)

好的,这是第一个情况的JSfiddle http://jsfiddle.net/pdV39/。你在setTimeout调用中遇到错误......它应该是:

setTimeout(rotate, (parseInt(speed) * 1000));

而不是

setTimeout("rotate()", (parseInt(speed) * 1000));

您的选择器也不完全正确:

$("div.rotate div.ob-offer-item div.test d div.ob-offer-details div.offer-holder:visible").prevAll("div")

找不到任何东西。除非存在类的冲突,否则您不需要包含您尝试查找的每个图层,并且需要更精确。所以这里是原始jsfiddle的更新,它确实有效,应该回答你的问题。 http://jsfiddle.net/pdV39/1/