jQuery选择ul li项目与下一个prev按钮

我试图选择li元素prev下一个按钮，目前使用此代码：http://jsfiddle.net/KzyAY/41/但如果你不断点击next/prev它会继续走出ul元素。任何想法如何选择里面UL？谢谢！jQuery选择ul li项目与下一个prev按钮

这里捣鼓：http://jsfiddle.net/KzyAY/41/

<ul class='selected' id=""> 
<li id="">1</li> 
<li id="">2</li> 
<li id="">3</li> 
</ul> 
<div>Current tag:<span id="current-tag"></span></div> 
<button id="prev">Previous</button> 
<button id="next">Next</button>

JS：

(function($) { 
    $.fn.domNext = function() { 
     return this 
      .children(":eq(0)") 
      .add(this.next()) 
      .add(this.parents().filter(function() { 
       return $(this).next().length > 0; 
      }).next()).first();   
    }; 

    $.fn.domPrevious = function() { 
     return this 
      .prev().find("*:last") 
      .add(this.parent())  
      .add(this.prev()) 
      .last();   
    }; 
})(jQuery); 

$("#next").click(function() { 
    var $next, $selected = $(".selected"); 

    $selected.removeClass("selected"); 
    $next = $selected.domNext().addClass("selected"); 
    if ($next.length) { 
     $("#current-tag").text($next.attr('class')); 
    } 
}); 

$("#prev").click(function() { 
    var $prev, $selected = $(".selected"); 
    $selected.removeClass("selected"); 
    $prev = $selected.domPrevious().addClass("selected"); 
    if ($prev.length) { 
     $("#current-tag").text($prev.get(0).tagName); 
    } 

});

来源

2013-07-17 Johnny Derp

看起来像很多代码来做一些相当简单的事情。 – j08691

通过UL和LI的旋转：http://jsfiddle.net/KzyAY/43/ – Pluto

不知道的插件。由于这确实是一个简单的东西矫枉过正。

但我只想写这件事

var $first = $('li:first', 'ul'); 
var $last = $('li:last', 'ul'); 

// Have the first and last li's set to a variable 
$("#next").click(function() { 

    var $next; 
    var $selected = $(".selected"); 
    // get the selected item 
    // If next li is empty , get the first 
    $next = $selected.next('li').length ? $selected.next('li') : $first; 
    $selected.removeClass("selected"); 
    $next.addClass('selected'); 
}); 

$("#prev").click(function() { 
    var $prev, 
     $selected = $(".selected"); 
    // get the selected item 
    // If prev li is empty , get the last 
    $prev = $selected.prev('li').length ? $selected.prev('li') : $last; 
    $selected.removeClass("selected"); 
    $prev.addClass('selected'); 
});

Check Fiddle

来源

2013-07-17 18:18:59

非常感谢所有！不要忘了看看我的最新电影：D –

很高兴有帮助:) –

@ Sushanth--，我有一个问题，几乎相同的问题上面:)如何把prev和下一个导航取决于大小浏览器？ http://codepen.io/anon/pen/wzOPrL，这里是我发布的问题http://stackoverflow.com/questions/40282774/next-and-prev-in-ul-li-responsive-view?noredirect=1 ＃comment67829352_40282774 – User014019

我想你只需要这个代码，已经有prev和next功能jQuery的：

$("#next").click(function() { 
    var currentSelect = $('ul > .selected'); 
    if (currentSelect.next().length == 0) 
    { 
     $('ul > li:first').addClass('selected'); 
    } 
    else 
    { 
     currentSelect.next().addClass('selected'); 
     } 
      currentSelect.removeClass('selected'); 
}); 

$("#prev").click(function() { 
    var currentSelect = $('ul > .selected'); 
    if (currentSelect.prev().length == 0) 
    { 
     $('ul > li:last').addClass('selected'); 
    } 
    else 
    { 
     currentSelect.prev().addClass('selected'); 
     } 
      currentSelect.removeClass('selected'); 
});

来源

2013-07-17 18:15:20

假设“选定的”李将有一类“活跃”。

<ul class='selected'> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

JS：

$("#next").click(function() { 
    move(1); 
}) 

$("#prev").click(function() { 
    move(-1) 
}) 

function move(dir) { 
    var active = 0; 
    var ind = $(target).find('li.active').index('.selected') 
    if(ind==-1) { 
     active = 0; 
    } 
    active = active+dir; 
    $('.selected li.active').removeClass('active'); 
    if(active<0) { 
     active=0; 
    } 
    if(active>$('.selected li').length()) { 
     active=$('.selected li').length(); 
    } 
    $('.selected li').eq(active-1).addClass('active'); 
}

来源

2013-07-17 18:18:57

与此标记：

<ul class='list' id="list"> 
    <li id="" class="selected">1</li> 
    <li id="">2</li> 
    <li id="">3</li> 
</ul> 
<div>Current tag:<span id="current-tag"></span> 

</div> 
<button id="prev">Previous</button> 
<button id="next">Next</button>

你可以这样做：

var list = $('#list').find('>li'); 
$("#prev,#next").click(function (event) { 
    var $new, $selected = $(".selected"); 
    $new = (event.target.id == "prev") ? ($selected.index() == 0 ? list.last() : $selected.prev()) : ($selected.index() == list.last().index() ? list.first() : $selected.next()); 
    $selected.removeClass("selected"); 
    $new.addClass("selected"); 
    $("#current-tag").text($new.attr('class') + $new.index()); 
});

实际行动：http://jsfiddle.net/5CJzE/

来源

2013-07-17 19:49:28

jQuery选择ul li项目与下一个prev按钮

回答

相关问题