jquery - jQuery 选择带有下一个上一个按钮的 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');
});

检查小提琴

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

使用此标记：

<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/

Answer 4

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

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