Question

我在.next()上使用jQuery ul时出现问题。当用户点击下一个按钮时，我将会将其添加到旁边的li。由于某种原因，它不断将它添加到每个列表项。这是一个有效的例子：

$(document).ready(function(){
    $('a.next').click(function(){
        //alert('clicked');
        $('ul.menu li').next().addClass('active');
    });
});

Answer 1

这是因为你的选择器过于通用了。

$('ul.menu li') //--> will return all li's of the menu
.next() //--> will return all the next li's to the selected li's

您可以改为将活动添加到第一个li开始，然后点击下一步选择next到$('ul.menu li:active')删除当前活动的一个。并为以前做同样的事情。

你可以这样做：

HTML：

<ul class="menu">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<a class="traverse" data-action="prev" href="#">previous</a>
<a class="traverse" data-action="next" href="#">next</a>

JS：

$(document).ready(function(){
   var  $menu = $('ul.menu'), 
        $menus =  $menu.children('li');

    $('a.traverse').click(function(){
        var action = $(this).data('action'), //Get the action prev/next
            jump = (action === 'next' ? 'first' : 'last'), //based on action determine the jump to switch to first or last when reached the end to enable a cycle
            $active = $menus.filter('.active').removeClass('active'), //remove current active li's class
            $target = $active[action](); //get the target applying the action

         if ( $target.length === 0){ //If no target i.e when it is at first or last and clicking on prev or next reptly
               $target =  $menus[jump](); //get the next element using the jump
         } 

        $target.addClass('active'); //add class to the target
    });
 });

<强> Demo

Answer 2

这是因为$('ul.menu li')会在ul.menu中选择所有列表项;然后.next()将为$('ul.menu li')中的每个元素找到下一个元素，因此当您添加类时，您将处理多个元素。

我想你可能想要从其中一个li元素开始使用活动类，然后使用类似的东西：

$('ul.menu li.active').removeClass('active').next().addClass('active');

Answer 3

您需要跟踪nextElement

var currentLi = $('.menu li').first();
$('a.next').click(function(){   
    if(!currentLi.hasClass('active')) {
        currentLi.addClass('active');
    } else {
        currentLi.removeClass('active');
        currentLi = currentLi.next();
        currentLi.addClass('active');
    }
});

我分叉你的jsfiddle http://jsfiddle.net/hatemalimam/8nqxt/

为什么使用.next（）选择所有li项而不是一项

3 个答案: