如何使用jquery獲取下一個li數據值？

Question

<ul> 
    <li class="x active" data-title="a"></li> 
    <li class="x" data-title="b"></li> 
    <li class="x" data-title="c"></li> 
    <li class="x" data-title="d"></li> 
</ul> 

<button id="btn1">Click me to get next data-title</button> 

如果當前活動li具有數據標題「a」，如何獲取下一個li的數據標題是「b」？

Answer 1

$("#btn1").click(function() { 
    var next_data_title = $('li.active').next('li').attr('data-title'); 
    alert(next_data_title); 
}); 

Answer 2

您可以使用

$("#btn1").on('click', function() { 
    console.log($("li.active").next("li").attr('data-title')); 
}); 

由.active類獲得下華里。如果你想通過其data-title選擇活動項目，您可以使用

$("#btn1").on('click', function() { 
    console.log($("li[data-title=a]").next("li").attr('data-title')); 
}); 

的工作示例見this fiddle。