如何使用jquery循環訪問每個li或div正面和反面

Question

我有一個ul約有五個<li>項目。例如。

<ul> 
    <li>Step 1 : Take food</li> 
    <li>Step 2 : Go Around</li> 
    <li>Step 3 : Deliver</li> 
</ul> 

我也有喜歡

<a href="# id="prev"> Previous</a> 

和

<a href="#" id="next"> Next</a> 

我必須拿出第一li在第一環節。然後當點擊next鏈接時，它現在應該顯示2nd <li>等等。以前的鏈接也一樣。請幫忙。

Answer 1

看看恰當命名的jQuery Cycle插件。

http://www.malsup.com/jquery/cycle/scrollhv.html

Answer 2

如果只顯示一個元素，所有你需要做的是使用DOM樹作爲搜索。如果你想要下一個元素，找到當前正在顯示的元素，隱藏它，並顯示它的下一個兄弟。如果您正在進行之前的操作，則隱藏當前項目並選擇之前的同級。

如果你不確定如何做到這一點，只是Google左右DOM導航。這不是太糟糕。

如果可能的話，我會簡單地爲你的LI（在id屬性中）使用一些命名約定，你可以很快地使用jQuery進行選擇。例如，如果你顯示的元素將有一個其他類不具備的類，可以使用jQuery快速選擇該元素，獲取其id，並以某種方式修改它以選擇上一個或下一個元素。

Answer 3

爲boerema說，這些方針的東西（它的未經測試！） 把「選擇」的啓動爲被示

<ul> 
<li>Step 1 : Take food</li> 
<li class="selected">Step 2 : Go Around</li> 
<li>Step 3 : Deliver</li> 
</ul> 


$("#prev").click(function(){ 
    $(".selected").hide().removeClass("selected").prev().show().addClass("Selected"); 
}); 

$("#next").click(function(){ 
    $(".selected").hide().removeClass("selected").next().show().addClass("Selected"); 
}); 

Answer 4

這裏是一個快速演示鋰類：http://jsbin.com/oduli4

var width = 500; 
    var height = 250; 
    var slide = 0; 
    var speed = 500; 
    var size = 0; 
$(document).ready(function() { 

    size = $('#slider').find('li').length; 

    $('#slider').find('ul').width(width * size).height(height); 
    $('#slider li, #slider img').width(width).height(height); 

    $('#next').bind('click',function() { 
    if(slide > img_width * (size - 1) *(-1)) { 
      slide -= width; 
     slider(slide); 
    } 
    }); 
    $('#prev').bind('click',function() { 
    if(slide < 0) { 
     slide += width; 
     slider(slide); 
    } 
    }); 
}); 


function slider(slideMargin) { 
    $('#slider ul').stop().animate({'left':slideMargin}, speed); 
} 

Answer 5

下面是完整的代碼：

$(document).ready(function() 
{ 
    var ul = $('ul'); 

    // hide all li 
    ul.find('li').hide(); 

    // make first li as current 
    ul.find('li').first().addClass('current').show(); 

    // setup previous click handler 
    $('a#prev').click(function() 
    { 
     var prev = ul.find('li.current').prev(); 

     if(prev.length) 
     { 
      ul.find('li.current').removeClass('current').hide(); 
      prev.addClass('current').show(); 
     } 
    }); 

    // setup next click handler 
    $('a#next').click(function() 
    { 
     var next = ul.find('li.current').next(); 

     if(next.length) 
     { 
      ul.find('li.current').removeClass('current').hide(); 
      next.addClass('current').show(); 
     } 
    }); 

});