Перемещение только видимых элементов

Question

Я пытался решить эту проблему некоторое время назад, я создал простую временную копию для представления проектов и добавленную фильтрацию/навигацию поверх нее. Я могу циклически перемещаться по ul, когда все выбрано, но в тот момент, когда я выбираю фильтр, навигация идет с haywire. Любая помощь будет оценена ниже код JQuery и страницы можно просматривать here

//FILTERING 
$('.portfolio-filter li a').click(function(){ 
    var ourFilter = $(this).attr('class'); 
    if($(this).hasClass('active')) { 
     return false; 
    } else { 
     $('.portfolio-filter li a').removeClass('active'); 
     $(this).addClass('active'); 
    } 
    if(ourFilter == 'all') { 
     $('#portfolio-container .row.collection').children('div.item').show(); 
    } else { 
     $('#portfolio-container .row.collection').children('div:not(.' + ourFilter + ')').hide(); 
     $('#portfolio-container .row.collection').children('div.' + ourFilter).show(); 
    } 
    return false; 
}); 
//GALLERY 
$('ul.project, ul.project.active').click(function(e){ 
    e.preventDefault(); 
    if($('ul.project').hasClass('active')) { 

    } else { 
     $(this).addClass('active'); 
    } 
    var projecttitle = $('ul.project.active').attr('projecttitle'); 
    var projectdescription = $('ul.project.active').attr('projectdescription'); 
    var prevProject = $('ul.project.active').closest('div.four.columns').prev(':visible').find('ul.project'); 
    var nextProject = $('ul.project.active').closest('div.four.columns').next(':visible').find('ul.project'); 
    var overlay = 
    '<div id="overlay" onclick="">' + 
     '<div class="row">' + 
      '<div class="seven columns">' + 
       '<div class="modal animated bounceInUp loader">' + 
        '<div class="project-content" style="opacity: 0"></div>' + 
       '</div>' + 
      '</div>' 
     '</div>' + 
    '</div>'; 
    var modal = 
    '<div class="close" onclick="">&#9660; TAP TO CLOSE &#9660;</div>' + 
    '<div class="project-navigation">' + 
     '<div class="prev-project" onclick="">&#9668;</div>' + 
     '<div class="next-project" onclick="">&#9658;</div>' + 
     '<div class="current-project">' + 
      '<h3>' + projecttitle + '</h3>' + 
      '<p>' + projectdescription + '</p>' + 
     '</div>' + 
    '</div>'; 

    if ($('#overlay').length > 0){ 
     $('.project-content').fadeTo(0,0, function(){ 
      $('.modal').addClass('loader'); 
      $('.project-content').html(''); 
      $('.project-content').append(modal); 
      if($(prevProject).length == 0){ 
       $('.prev-project').addClass('disabled'); 
      } else { 
       $('.prev-project').removeClass('disabled'); 
      }; 
      if($(nextProject).length == 0){ 
       $('.next-project').addClass('disabled'); 
      } else { 
       $('.next-project').removeClass('disabled'); 
      }; 
      $('.active').find('.lightbox').each(function(){ 
       var $href = $(this).attr('href'); 
       $('.project-content').append(
        '<img src="' + $href + '">' 
       ); 
      }); 

      var imgs = $('.project-content > img').not(function(){ 
       return this.complete; 
      }) 

      var count = imgs.length; 
      if (count){ 
       imgs.load(function(){ 
        count--; 
        if(!count){ 
         $('.modal').removeClass('loader'); 
         $('.project-content').fadeTo(0,1); 
        } 
       }); 
      } else { 
       $('.modal').removeClass('loader'); 
       $('.project-content').fadeTo(0,1); 
      }; 
     }); 
    } else { 
     $('body').append(overlay); 
     $('body').addClass('modal-open'); 
     $('.project-content').append(modal); 
     if($(prevProject).length == 0){ 
      $('.prev-project').addClass('disabled'); 
     } else { 
      $('.prev-project').removeClass('disabled'); 
     }; 
     if($(nextProject).length == 0){ 
      $('.next-project').addClass('disabled'); 
     } else { 
      $('.next-project').removeClass('disabled'); 
     }; 

     $('.active').find('.lightbox').each(function(){ 
      var $href = $(this).attr('href'); 
      var screenheader = $(this).attr('screen'); 
      $('.project-content').append(
       '<img src="' + $href + '">' 
      ); 
     }); 

     var imgs = $('.project-content > img').not(function(){ 
      return this.complete; 
     }) 
     var count = imgs.length; 
     if (count){ 
      imgs.load(function(){ 
       count--; 
       if(!count){ 
        $('.modal').removeClass('loader'); 
        $('.project-content').fadeTo(0,1); 
       } 
      }); 
     } else { 
      $('.modal').removeClass('loader'); 
      $('.project-content').fadeTo(0,1); 
     }; 
    } 
}); 

$(function(){ 
    $('.prev-project').live('click', function(e){ 
     e.stopPropagation(); 
     var prevProject = $('ul.project.active').closest('div.four.columns').prev(':visible').find('ul.project'); 
     if($(prevProject).length > 0){ 
      $('ul.project.active').removeClass('active'); 
      $(prevProject).addClass('active'); 
      $('ul.project.active').click(); 
     }; 
    }); 
    $('.next-project').live('click',function(e){ 
     e.stopPropagation(); 
     var nextProject = $('ul.project.active').closest('div.four.columns').next(':visible').find('ul.project'); 
     if($(nextProject).length > 0){ 
      $('ul.project.active').removeClass('active'); 
      $(nextProject).addClass('active'); 
      $('ul.project.active').click(); 
     }; 
    }); 
    $('#overlay, .close').live('click', function(e){ 
     e.stopPropagation(); 
     $('.modal').addClass('bounceOutDown'); 
     $('body').removeClass('modal-open'); 
     $('.project').removeClass('active'); 
     $('#overlay').delay(500).fadeOut(0, function(){ 
      $(this).remove(); 
     }) 
    }); 
}); 

//KEYSTROKES 
$(document).keydown(function(e){ 
    if (e.keyCode == 27) { 
     if($('#overlay').length > 0){ 
      $('.modal').addClass('bounceOutDown'); 
      $('body').removeClass('modal-open'); 
      $('.project').removeClass('active'); 
      $('#overlay').delay(500).fadeOut(0, function(){ 
       $(this).remove(); 
      }) 
     } 
    } 
    if (e.keyCode == 37) { // PREV 
     $('.prev-project').click(); 
    } 
    if (e.keyCode == 39) { // NEXT 
     $('.next-project').click(); 
    } 
}); 

Answer 1

возился со связующим события .next-проекта и обнаружили, что этот селектор работал

var nextProject = $('ul.project.active').parent().nextAll(':visible').find('ul.project'); 

вместо от

var nextProject = $('ul.project.active').closest('div.four.columns').next(':visible').find('ul.project'); 

Возможно, вы можете использовать следующие селекторные и prevAll для его исправления.