如何獲取列表中的下一個項目

試圖創建一個可點擊的事件，以便當單擊#next時，本例中的2000-2001等html會被髮送到身體標記上的一個類，例如下劃線。 body class =「_ 2000-2001」。如何獲取列表中的下一個項目

當前日期有選擇的類，每次點擊#next時，選定的類將移動到該標記。

我需要弄清楚的是，如何在每次點擊時獲取列表中的下一個li標籤，而不是ul＃日期li a.selected。

我應該使用.next（）函數嗎？

<ul id="dates">     
    <li><a href="#1970-1974" class="selected">1970-1974</a></li>   
    <li><a href="#1974-1980">1974-1980</a></li>   
    <li><a href="#1980-1992">1980-1992</a></li>   
    <li><a href="#1992-2000">1992-2000</a></li>   
    <li><a href="#2000-2001">2000-2001</a></li>  
    <li><a href="#2001-2004">2001-2004</a></li>   
    <li><a href="#2004-2006">2004-2006</a></li>   
    <li><a href="#2006-2007">2006-2007</a></li>   
    <li><a href="#2007-2008">2007-2008</a></li>   
    <li><a href="#2009-2011">2009-2011</a></li>  
    <li><a href="#Present">Present</a></li> 
</ul> 

<a href="#" id="next">+</a> 
<a href="#" id="prev">-</a>

JQuery的：

$('a#next').click(function() { 
    var htmlStr = $('ul#dates li a.selected').html(); 
    console.log(htmlStr); 
    $('body').attr('class', function() { 
     return '_' + htmlStr; 
    }); 
}); 

$('a#prev').click(function() { 
    var htmlStr = $('ul#dates li a.selected').html(); 
    $('body').attr('class', function() { 
     return '_' + htmlStr; 
    }); 
});

來源

2012-10-09 Rob

不太確定在哪裏使用它，我是一個初學者。以上採用.selected html，我需要它直接抓取下一個鏈接html。列表中選擇 – Rob

變化

$('ul#dates li a.selected').html();

到

$('ul#dates li a.selected').parent().next().children().html();

工作fiddle。

編輯：在「ul＃日期li a.selected」選擇器中，我們選擇了li元素內的定位標記。所以你必須通過使用parent（）調用向上移動一步，next（）會帶你到下一個li元素。因爲你需要子元素的html，所以我們調用$ .children（）。html（）;.如果裏面有多個元素，您將不得不像$ .children（）。first（）。html（）;這樣的東西。

來源

2012-10-09 14:46:19 bhb

很酷的感謝，任何機會，你可以解釋這一點？ – Rob

更新與解釋:) – bhb

很好，謝謝你的解釋。所以這有點兒叫jQuery方法來反彈html元素並獲取所需的數據。開始讓我的頭腦圍繞jQuery，仍然有很多的學習要做！ – Rob

您可以使用類似：

var $cur = ''; 
var $next = ''; 
var $prev = ''; 
var htmlStr = ''; 

$("#next").on('click', function() { 
    $cur = $("#dates li a.selected"); 
    $next = $cur.parent().next().find('a'); 
    if ($next.length > 0) { 
     $cur.removeClass('selected'); 
     $next.addClass('selected'); 
     $('body').attr('class', '_' + $next.text()); 
    } 
}); 


$("#prev").on('click', function() { 
    $cur = $("#dates li a.selected"); 
    $prev = $cur.parent().prev().find('a'); 
    if ($prev.length > 0) { 
     $cur.removeClass('selected'); 
     $prev.addClass('selected'); 
     $('body').attr('class', '_' + $prev.text()); 
    } 
});

來源

2012-10-09 14:46:08

如何獲取列表中的下一個項目

回答

相關問題