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

Question

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

这里小提琴: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);
    }

});

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

检查小提琴