爲什麼使用.next（）選擇所有li項目而不是僅一個

我在使用jQuery .next()在我的ul上遇到問題。當用戶點擊下一個按鈕時，我只會將它添加到旁邊的li。出於某種原因，它不斷將其添加到每個列表項。這是一個工作示例：爲什麼使用.next（）選擇所有li項目而不是僅一個

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

來源

2013-12-13 Eric Oboite

你選擇了所有列表項目，然後選擇下一個列表項目，這將是所有列出除第一個之外的項目。你的邏輯/選擇器是有缺陷的。 –

「...在它旁邊」旁邊什麼？ – isherwood

這是因爲$('ul.menu li')將選擇內您的所有列表項;然後，.next()將找到$('ul.menu li')中每個元素的下一個元素，因此當您添加類時，您正在處理幾個元素。

我想你可能要與具有對li要素之一的活動類開始，然後使用類似：

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

來源

2013-12-13 21:25:24 BYossarian

那是因爲你的選擇是太普通。

$('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

來源

2013-12-13 21:19:00 PSL

你需要保持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/

來源

2013-12-13 21:27:27

爲什麼使用.next（）選擇所有li項目而不是僅一個

回答

相關問題