jQuery使用下一个上一个按钮选择ul li项目 [英] jQuery select ul li items with next prev buttons

问题描述

我正在尝试使用上一个下一个按钮选择li元素，当前正在使用以下代码: http://jsfiddle .net/KzyAY/41/，但是如果您继续单击下一个/上一个"，则它会一直超出ul元素.知道我如何在ul中选择吗?谢谢！

I'm trying to select li element with prev next buttons, currently using this code: http://jsfiddle.net/KzyAY/41/ but if you keep clicking next/prev it keeps going out of the ul element. any idea how i select inside ul ? Thanks!

在这里摆弄: 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);
    }

});

推荐答案

不确定该插件.因为这对于简单的事情肯定是一个过大的杀伤力.

Not sure about the plugin.. As that is surely an overkill for something simple.

但是我只想写下来

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

这篇关于jQuery使用下一个上一个按钮选择ul li项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！