Problème de sélecteur JQuery avec prevAll

Question

J'ai du mal à faire fonctionner un code Jquery. Je pense que mon problème est lié à la façon dont j'écris le sélecteur.

Voici mon HTML d'origine:

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

... et voici mon code 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(); 

Cela fonctionne parfaitement (Soit dit en passant, dans le CSS, la position de l'offre porte est réglé à l'absolu, en haut: 0px, à gauche: 0px). BTW, ceci est un rotateur d'annonce. Tous les divs se chevauchent, puis apparaissent un par un, en boucle en continu.

Maintenant, je dois le modifier pour une autre page qui ressemble à ceci:

<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> 

... et voici ce que j'ai essayé:

$("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(); 

Je soupçonne que mon problème est le prevAll. C'est en fait cacher chaque div avant (ce que, je suppose, est ce que je lui dis de faire). Au lieu d'un joli fondu d'une annonce à la suivante en fonction de la valeur de lblSeconds, il scintille continuellement chaque seconde. Je ne connais pas la syntaxe correcte pour corriger le chemin du sélecteur prevAll. J'ai essayé plusieurs combinaisons, en vain.

Toute aide est la bienvenue.

Merci.

Stephen

Answer 1

Ok, voici une jsFiddle http://jsfiddle.net/pdV39/ avec votre première situation. Vous avez eu une erreur dans l'appel setTimeout ... il devrait être:

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

au lieu de

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

Vos sélecteurs ne sont pas tout à fait correct soit:

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

Does not trouver n'importe quoi. Vous n'avez pas besoin d'inclure chaque couche que vous essayez de trouver à moins qu'il y ait une collision de classes et que vous deviez être plus précis. Donc, voici une mise à jour de l'original jsfiddle qui fonctionne et devrait répondre à votre question. http://jsfiddle.net/pdV39/1/