使用jquery，當元素不是連續的順序時，如何返回具有下一個連續ID的元素？

Question

根據下面的示例，我有一組鏈接。鏈接的ID是連續編號的，但鏈接本身不是連續的順序。我知道如何返回被點擊的鏈接的href和ID，但我也想獲得下一個連續ID的鏈接的href，並且當它變成選定的元素時，獲取下一個等等。我知道如何做到這一點，當元素是連續的順序本身，但不是當他們是這樣的。 任何幫助將不勝感激。

我的HTML

<div id="container"> 

<div class="group"> 
<a class="clickable" id="itemid-01" href=""></a> 
<a class="clickable" id="itemid-04" href=""></a> 
</div> 

<div class="group"> 
<a class="clickable" id="itemid-02" href=""></a> 
<a class="clickable" id="itemid-05" href=""></a> 
</div> 

<div class="group"> 
<a class="clickable" id="itemid-03" href=""></a> 
<a class="clickable" id="itemid-06" href=""></a> 
</div> 

</div> 

我的腳本

$(document).ready(function(){ 
$('.clickable').click(function(e){ 
e.preventDefault(); 
var this_href = $(this).attr('href'); 
var this_ID = $(this).attr('id'); 
var next_ID = //this is the part I can't work out 
}); 
}); 

Answer 1

如果我理解正確的問題，這應該這樣做。如果數字小於10，我添加了if語句來追蹤尾部零。對於大於100的數字，您必須執行類似的操作。

$(document).ready(function(){ 
    $('.clickable').click(function(e){ 
    e.preventDefault(); 
    var this_ID = $(this).attr('id'); 
    var id_pieces = this_ID.split('-'); 
    var currentId = parseInt(id_pieces[1]); 

    var next_ID = ''; 
    if(currentId>=10){ 
     next_ID = id_pieces[0]+'-'+(currentId+1); 
    }else{ 
     next_ID = id_pieces[0]+'-0'+(currentId+1); 
    } 

    console.log(next_ID); 

    }); 
    }); 

Answer 2

我不確定你的標記的範圍是關於你計劃在屏幕上有多少元素。無論是哪種情況，給你有它設置，你可以做這樣的事情的方式：

var thisId = $(this).attr('id'); 
var nextId = null; 

//use some regex to get the id from the end of the string 
var matches = thisId.match(/\d+$/); 

//if it finds a matching integer... 
if (matches) { 

    //parse out the integer and increment it by 1 
    var nextIdInt = parseInt(matches[0], 10); 
    nextIdInt++; 

    //build the next id string: 
    //if less than 10, it addes a leading zero, otherwise just leaves it as is 
    nextId = (nextIdInt < 10) ? "itemid-" + "0" + nextIdInt : "itemid-" + nextIdInt; 
} 

if (nextId) { 
    //do something here with the next id if it is not null 
} 

如果我這樣做，我可能會做對自己有點更容易使用的自定義屬性。這將避免使用正則表達式或任何字符串操作，並會使代碼更簡單。

在您的「點擊」錨，給他們某種指標屬性的，像這樣：

<a class="clickable" id="itemid-01" href="" data-index="1"></a> 

然後你的js可以簡單地是：

var thisId = $(this).attr('id'); 
var nextId = null; 

//increment the index and store it in a variable 
var nextIndex = parseInt($(this).attr('data-index'), 10) + 1; 

//get the next element 
var nextElement = $('a.clickable[data-index="' + nextIndex + '"]'); 

//probably smart to make sure we found something... 
if (nextElement.length > 0) { 

    //if you want the id 
    nextId = nextElement.attr('id'); 

} 

如果你不希望它爲可讀和所有你需要的是一張ID：

var thisId = $(this).attr('id'); 
var nextId = $('a.clickable[data-index="' + (parseInt($(this).attr('data-index'), 10) + 1) + '"]').attr('id'); 

這裏有一個fiddle