如何使用jquery在当前元素之前/之后选择具有特定ID的元素?

时间:2014-01-16 12:48:35

标签: javascript jquery element selector

我有一个网站,其中包含多个DIV,这些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_)。

谢谢你的帮助!

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:1)

如果此处的行为为:

<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小提琴。