jQuery .next（）選擇所有，而不僅僅是接下來的

我是jQuery的新手，並且一直在用進度指示器進行測驗，並遇到了jQuery的一些問題。這裏是我的進度指示器jQuery .next（）選擇所有，而不僅僅是接下來的

<div id="progressKeeper"> 
    <ul> 
     <li><a class="step" href="#"></a></li> 
     <li><a class="step" href="#"></a></li> 
     <li><a class="step" href="#"></a></li> 
     <li><a class="step" href="#"></a></li> 
     <li><a class="step" href="#"></a></li> 
     <li><a class="step" href="#"></a></li> 
     <li><a class="step" href="#"></a></li> 
     <li><a class="step" href="#"></a></li> 
     <li><a class="step" href="#"></a></li> 
    </ul> 
</div>

使用CSS，我有一個灰色圓圈添加背景圖片的所有錨標籤與類的.step HTML和我創建了一個與一類錨標籤的.step和.green背景圖像切換到綠色圓圈

#progressKeeper li a.step { 
    background: url(img/Progress_grey.png) no-repeat; 
    width: 14px; 
    height: 14px; 
    position: absolute; 
} 

#progressKeeper li a.step.green { 
    background: url(img/Progress_green.png) no-repeat; 
}

，並與jQuery，我想要類.green添加到第二天#progressKeeper li a.step點擊與類的.btnNext按鈕時。

$('.btnStart').click(function(){ 
     $('#progressKeeper li a.step').first().addClass('green'); 
    }); 

    $('.btnNext').click(function(){ 
     $('#progressKeeper ul li a.step').parent().next('li').find('a').addClass('green'); 
});

我的問題是，當我在按鈕上點擊「下一步」，所有的未來li a元素被添加類的綠色。我使用.next（），據我所知，它應該只選擇第一個即時兄弟。

我在哪裏做錯了？

編輯：我忘了提及，我希望前進的元素保持綠色。所有的解決方案的工作原理和感謝您的解釋，但我不確定接受哪個答案，因爲阿富汗之王的答案是正確的答案，即使你不知道我想要什麼。

來源

2014-12-23 Davallen

您的'下一步'按鈕是選擇所有.step元素，然後遍歷以找到其中每個元素中的a元素。您只需要選擇.step元素，其中也有.green類，然後從中刪除並將其添加到下一個。事情是這樣的：

$('.btnNext').click(function(){ 
    $('#progressKeeper ul li a.step.green').removeClass('green').closest('li').next().find('a').addClass('green'); 
});

Example fiddle

如果你想類進步下來列表而不從以前的項目刪除，刪除.removeClass('green')電話：http://jsfiddle.net/ah5ngktb/1/

來源

2014-12-23 09:18:30

好戲了，加入的jsfiddle。很好的測試，這就是爲什麼我發現，如果你開始，下一個，下一個，開始，你會得到多個綠色。可能'start'應該在將第一個綠色設置爲綠色之前清除所有綠色：'$（'＃progressKeeper ul li.sql.green'）。removeClass（'green'）'。但我還是給了你一個，因爲這是另一個問題。 – paxdiablo

這是一個常見的問題是提出了人們對jQuery如何工作的理解。

此代碼：

$('#progressKeeper ul li a.step').parent()

...將導致包含li元素是a.step元素都在裏面一個ul內#progressKeeper的父母所有一個jQuery集。因此，在它導致除了其中一個li元素（第一個將不在集合中）之後的集合中添加.next()，因爲它獲得當前在該集合中的每個元素之後的下一個元素。

要限制某個特定元素，您可以使用您的類，例如，：

$('.btnNext').click(function(){ 
    $('#progressKeeper ul li a.step.green').last().parent().next('li').find('a').addClass('green'); 
});

這將讓擁有它的最後一個元素之後添加類。

來源

2014-12-23 09:19:20

這必須指向下一個第一li和含a

$('.btnNext').click(function(){ 
     $('#progressKeeper ul li a.step.green').removeClass('green').closest('li') 
      .next('li').find('a').addClass('green'); 
});

來源

2014-12-23 09:22:53 goseo

jQuery .next（）選擇所有，而不僅僅是接下來的

回答

相關問題