遍歷多個無序列表

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遍歷ul。 我的頁面上有覆蓋層，並使用這些箭頭更改了背景圖片。 但是，單擊這些箭頭時，我無法從第一個ul傳遞到第二個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); 

})
});