遍歷多個無序列表

Question

考慮下面的標記：

<div class="col6"> 
    <h2>Accueil</h2> 
    <ul class="listing"> 
     <li><a href="#" title="bg_home">Accueil</a></li> 
     <li><a href="#" title="bg_homeTakeover">Homepage Takeover</a></li> 
     <li><a href="#" title="bg_homePromoOverlay">Homepage Promo Overlay</a></li> 
     <li><a href="#" title="bg_homeFeatureOverlay">Homepage Feature Overlay</a></li> 
     <li><a href="#" title="bg_homeFeatureScrollOverlay">Homepage Feature Scroll + Takeover</a></li> 
    </ul> 

    <h2>Thèmes & intégrations</h2> 
    <ul class="listing">       
     <li><a href="#" title="bg_le30">Le 30</a></li> 
     <li><a href="#" title="bg_menuCarte">Menu à la carte</a></li>       
     <li><a href="#" title="bg_intTheme">Intégration thème</a></li> 
     <li><a href="#" title="bg_intVirtuel01">Intégration papier virtuel 1</a></li> 
     <li><a href="#" title="bg_intVirtuel02">Intégration papier virtuel 2</a></li> 
    </ul> 

    <h2>Galeries</h2> 
    <ul class="listing"> 
     <li><a href="#" title="bg_gal01">St-Valentin noir & blanc</a></li> 
     <li><a href="#" title="bg_gal02">Cuisinez avec le fromage</a></li> 
     <li><a href="#" title="bg_gal03">Des fraises pour dessert</a></li> 
     <li><a href="#" title="bg_gal04">Nos meilleures recettes de homard</a></li> 
     <li><a href="#" title="bg_gal05">Jeudi 5@7</a></li> 
    </ul> 
</div> 

我想遍歷我#leftArrow和#rightArrow的ULS。我有一個覆蓋頁面，我用這些箭頭改變了背景圖片。但是，當點擊這些箭頭時，我無法從第一個ul傳遞到第二個。

這裏是Jquery的

$(document).ready(function(){ 

    var current_li; 
    //OPEN OVERLAY 
    $('.innerWrap a').click(function(){ 

     var src = $(this).attr("title"); 

     current_li = $(this).parent(); 

     var text = $(current_li).text(); 
     $('#frame h2').text(text) 

     $('#projectOverlay').css({'background-image': 'url(img/' + src + '.jpg)' ,}); 


     $('#frame').fadeIn(400); 
     $('#projectOverlay').fadeIn(400); 

    }) 

    //RIGHT 
    $("#rightArrow").click(function(){ 

     if(current_li.is(":last-child")) {     
      var next_li = current_li.parents('ul').siblings().find('li').first();             
     } else { 
      var next_li = current_li.next();    
     } 

     var next_src = next_li.children('a').attr("title");    

     current_li = next_li; 
    }) 

    //LEFT 
    $("#leftArrow").click(function(){ 

     if(current_li.is(":first-child")) { 
      //var prev_li = $('.innerWrap ul li').last(); 
      var prev_li = current_li.parents('ul').siblings().find('li').last(); 
     } else { 
      var prev_li = current_li.prev(); 
     } 

     var prev_src= prev_li.children('a').attr("title");   

     current_li = prev_li; 

    }) 

}); 

任何幫助，將不勝感激！

謝謝！

Answer 1

https://jsfiddle.net/rgwst1xj/4/

編輯：解

$(document).ready(function(){ 

// I set current_li manually, so change it 
var current_li = $('a').first().parent(); 
// Use your own method to determine which ul is the current one 
var current_ul = 0; 

//RIGHT 
$("#rightArrow").click(function(){ 

    if(current_li.is(":last-child")) { 
     // you may want to be more specific with $('ul').length 
     current_ul = (current_ul + 1)%$('ul').length; 
     var next_li = current_li.parent().parent().find('ul:eq('+current_ul+')').find('li').first(); 
    } else { 
     var next_li = current_li.next();    
    } 

    var next_src = next_li.children('a').attr("title"); 

    current_li = next_li; 

    console.log(current_li.text()) 
    var text = $(current_li).text(); 
    $('#frame h2').text(text); 
}) 

//LEFT 
$("#leftArrow").click(function(){ 

    if(current_li.is(":first-child")) { 
     //var prev_li = $('.innerWrap ul li').last(); 
     current_ul = (current_ul - 1)%$('ul').length; 
     var prev_li = current_li.parent().parent().find('ul:eq('+current_ul+')').find('li').last(); 
    } else { 
     var prev_li = current_li.prev(); 
    } 

    var prev_src= prev_li.children('a').attr("title"); 

    $('#projectOverlay').animate({opacity: 0}, 200, function() { 
     $(this) 
      .css({'background-image': 'url(img/' + prev_src + '.jpg)' ,}) 
      .animate({opacity: 1}); 

      bgSize($('#projectOverlay'), function(width, height){ 
      $("#frame").css("height",height)     
      $("#projectOverlay").css("height",height); 
     });  
    });   

    current_li = prev_li; 
    console.log(current_li.text()) 
    var text = $(current_li).text(); 
    $('#frame h2').text(text); 

}) 
});