如何使用jquery在當前元素之前/之後選擇具有特定ID的元素？

Question

我有一個包含與未組織多個相同的元素的DIV網站...

例如：

<div> 
    <div id='abc_152142'> 
    </div> 
    <div id='abc_2353253'> 
    </div> 
    <div id='abc_3421121'> 
    </div> 
</div> 
<div> 
    <div id='abc_44211241'> 
    </div> 
</div> 
<div> 
    <div id='abc_541221421'> 
    </div> 
</div> 
<div> 
    <div id='abc_654354'> // --> THIS ONE IS SELECTED 
    </div> 
    <div id='abc_754335'> 
    </div> 
    <div id='abc_845345'> 
    </div> 
</div> 

所以寫在代碼我的ID「abc_654354」，並希望使用在當前元素前後開始的相同ID獲取元素。

我曾嘗試：

$(this).prev("div[id^='td_']"); 
$(this).next("div[id^='td_']"); 

並沒有得到我任何結果...

ID是隨機的，他們有共同的唯一的事情是ID開頭（在此例如我用td_）。

謝謝你的幫忙！

Answer 1

您可以簡單地選擇基於他們對jQuery的集合中的索引的元素：

var $e = $('div[id^="td_"]'); 
var i = $e.index(this); 

var $before = $e.eq(i - 1); 
var $after = $e.eq(i + 1); 

http://jsfiddle.net/QGsza/

Answer 2

如果行爲這裏以前：

<div> 
    <div id='abc_541221421'> 
    </div> 
</div> 
<div> 
    <div id='abc_654354'> // --> THIS ONE IS SELECTED 
    </div> 
    <div id='abc_754335'> 
    </div> 
    <div id='abc_845345'> 
    </div> 
</div> 

是<div id='abc_541221421'>被退回然後：

function getPrevious(){  
    var previous = $(this).prev("div[id^='abc_']"); 
    if (previous.length > 0) 
     return previous; 
    return $(this).parent().prev().find("div[id^='abc_']:last") 
} 

，併爲下：

function getNext(){  
    var next = $(this).next("div[id^='abc_']"); 
    if (next.length > 0) 
     return next; 
    return $(this).parent().next().find("div[id^='abc_']:first") 
} 

Here's小提琴。