Javascript 遍历多个无序列表

考虑以下标记：

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

任何帮助都将不胜感激

谢谢

编辑：解决方案

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

})
});

---

你能去掉不相关的jQuery吗？那有很多要筛选的。你可能只需要左边或右边，而不是两者都需要。还要更详细地解释一下你的点击功能应该做什么。请在你的问题中添加信息，而不是在注释中。因此要求你在这里发布相关代码，在你的答案中。这是我的问题，它在第一个和第二个ul中循环，但在第三个ul中循环。我发现了问题，我会在稍后发布解决方案。在第一个ul中，兄弟姐妹中的第一个ul是第二个ul，在第二个ul中，兄弟姐妹中的第一个ul是第一个ul非常感谢！它很有魅力，为我节省了无数的工作时间。

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

})
});