jQuery选择带有下一个prev按钮的ul li项目

我正在尝试使用prev下一个按钮选择li元素，目前正在使用此代码： http ： //jsfiddle.net/KzyAY/41/但是如果你继续点击next / prev它会继续走出ul元素。 任何想法我如何选择内部ul？ 谢谢！

这里小提琴： http ： //jsfiddle.net/KzyAY/41/

 
1
 
2
 
3
 
 
Current tag:
 Previous Next 

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); } }); 

Answer 1

不确定插件..因为这对于简单的事情肯定是一种矫枉过正。

但我会写这个

 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'); }); 

检查小提琴

Answer 2

我认为你只需要这个代码，Jquery中已有prev和next函数：

 $("#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'); }); 

Answer 3

使用此标记：

 
 
1
 
2
 
3
 
 
Current tag: 
 Previous Next 

你可以这样做：

 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/

Answer 4

假设“选定的”LI将具有“活动”类。

 
 
1
 
2
 
3
  

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'); }