Filtrer à travers des éléments de même classe mais pas dans la même enveloppe

En utilisant la méthode que j'ai trouvée ici, j'essaie d'améliorer la fonctionnalité de ma question précédente .

Fondamentalement, je souhaite parcourir mes éléments avec les boutons précédents et suivants. Je ne peux pas utiliser les fonctions nextAll() et prevAll() car elles ne sont pas toutes dans le même wrapper, alors j'ai utilisé la solution la plus évoluée à partir du premier lien. Le cycle suivant fonctionne bien, et le précédent ne fonctionne pas.

 var $content = $(".big_container"); var $loaded_content = $(".details"); var $item_selector = $(".item"); var $previous = $('.previous'); var $next = $('.next'); if ($content.length > 0) { $item_selector.on('click', function(e) { e.preventDefault(); var $this = $(this); load_gallery_container($this); }); $next.on('click', function(e) { e.preventDefault(); var $next_item = $content.find('.current').findNext('.item'); if ($content.find('.item').hasClass('current')) { if ($next_item.length) { $content.find('.item').removeClass('current'); } load_gallery_container_next_prev($next_item); } }); $previous.on('click', function(e) { e.preventDefault(); var $prev_item = $content.find('.current').findPrev('.item'); if ($content.find('.item').hasClass('current')) { if ($prev_item.length) { $content.find('.item').removeClass('current'); } load_gallery_container_next_prev($prev_item); } }); } //Next all items $.fn.findNextAll = function(selector) { var that = this[0], selection = $(selector).get(); return this.pushStack(!that && selection || $.grep(selection, function(n) { return that.compareDocumentPosition(n) & (1 << 2); // if you are looking for previous elements it should be & (1<<1); })); } $.fn.findNext = function(selector) { return this.pushStack(this.findNextAll(selector).first()); } //Previous all items $.fn.findPreviousAll = function(selector) { var that = this[0], selection = $(selector).get(); return this.pushStack(!that && selection || $.grep(selection, function(n) { return that.compareDocumentPosition(n) & (1 << 1); // if you are looking for previous elements it should be & (1<<1); }).reverse()); } $.fn.findPrev = function(selector) { return this.pushStack(this.findPreviousAll(selector).first()); } function load_gallery_container_next_prev($container) { $loaded_content.find('.div_content').html($container.data('content')); $container.addClass('current'); } function load_gallery_container($container) { if ($container.hasClass("current")) { $loaded_content.slideUp('slow', function() { $(this).removeClass('open'); $container.removeClass("current"); }); } else { var $insert_after = $container.parent('.wrappers'), $current = $('.current'); $current.removeClass('current'); if ($current.parent('.wrappers').is($insert_after)) { $loaded_content.find('.div_content').html($container.data('content')); $container.addClass("current"); } else { if ($loaded_content.hasClass("open")) { $loaded_content.slideUp('slow', function() { $(this).removeClass('open'); $container.removeClass("current"); $loaded_content.detach().insertAfter($insert_after); $loaded_content.find('.div_content').html($container.data('content')); }); } else { $loaded_content.detach().insertAfter($insert_after); $loaded_content.find('.div_content').html($container.data('content')); } $loaded_content.slideDown('slow', function() { $container.addClass("current"); $(this).addClass('open'); }); } } setTimeout(function() { $('html, body').animate({ scrollTop: $loaded_content.offset().top - 300 }, 500); }, 600); }

 .big_container { background: #141414; display: block; padding: 30px; } .wrappers { width: 500px; margin: 0 auto; display: block; } .item { width: 31%; height: 100px; margin-right: 1%; margin-bottom: 30px; text-align: center; background: #ccc; color: #fff; display: inline-block; } .details { background: #ddd; width: 100%; padding: 30px; display: none; } .navigation { display: block; text-align: center; color: #fff; } .previous, .next { font-size: 18px; display: inline-block; margin: 0 12px 10px; cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="big_container"> <div class="navigation"> <div class="previous"> <</div> <div class="next">></div> </div> <div class="wrappers"> <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div> <div class="item" data-content="blabla BLALALA bla blaaaa">Click on meee!</div> <div class="item" data-content="blabla blBLALbla blaaaa">Click on meee!</div> </div> <div class="wrappers"> <div class="item" data-content="blabla bla bla randomness">Click on meee!</div> <div class="item" data-content="blabla bla bla ">Click on meee!</div> <div class="item" data-content="blabla bla bla weeee">Click on meee!</div> </div> <div class="wrappers"> <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div> <div class="item" data-content="blabla bla bla???">Click on meee!</div> <div class="item" data-content="I am done with blaaaaing">Click on meee!</div> </div> <div class="details">The content from div goes here: <div class="div_content"></div> </div> </div>

Fondamentalement, lorsque je clique sur précédent, je suis renvoyé au premier élément de la liste, et non à la précédente. Donc, la fonction findPrev() doit être findPrev() , et j'ai beaucoup essayé: en changeant .first() vers .last() et .prev() et even .prevAll() ; A essayé de changer le return that.compareDocumentPosition(n) & (1<<1);

Rien n'a changé pour que cela passe à l'élément précédent. Quelqu'un a une idée de ce qui ne va pas?

RÉPONDRE

D'accord, alors la solution est la suivante:

 $.fn.findPreviousAll = function( selector ){ var that = this[ 0 ], selection = $( selector ).get(); return this.pushStack( !that && selection || $.grep( selection, function(n){ return that.compareDocumentPosition(n) & (1<<1); // if you are looking for previous elements it should be & (1<<1); }).reverse() ); }; $.fn.findPrev = function( selector ){ return this.pushStack( this.findPreviousAll( selector ).first() ); };

Ce que la fonction findPreviousAll faisait était de renvoyer un tableau du premier élément à celui auquel j'ai cliqué, alors j'ai juste besoin de l'inverser! Et un simple .reverse() fait 🙂

J'ai mis à jour l'extrait, donc ça marche! 🙂

Change ça:

 var $prev_item = $content.find('.current').findPrev('.item'); if ($content.find('.item').hasClass('current')) { if ($prev_item.length) { $content.find('.item').removeClass('current'); } load_gallery_container_next_prev($prev_item); }

pour ça:

 var $prev_item = $(".item")[$(".item").index($(".item.current"))-1]; if($prev_item){ $(".item.current").removeClass('current'); } $($prev_item).addClass('current'); load_gallery_container_next_prev($prev_item);

Et modifiez ceci:

 function load_gallery_container_next_prev($container) { $loaded_content.find('.div_content').html($container.data('content')); $container.addClass('current'); }

pour ça:

 function load_gallery_container_next_prev($container) { $loaded_content.find('.div_content').html($($container).attr("data-content")); $container.addClass('current'); }

Voici la démonstration de JSFiddle 🙂