jQuery：next父母的所有獨立

我正在構建一個小的燈箱插件（只是爲了好玩），如果用戶按下一個鍵，它應該打開（模擬點擊）具有相同「rel」屬性的下一個鏈接。上述jQuery：next父母的所有獨立

.nextAll('.box[rel="'+boxed+'"]').eq(0).click();

的代碼適用於下面的例子：

<a href="/1.jpg" class="box" rel="box-abc123">One</a> 
<a href="/2.jpg" class="box" rel="box-abc123">Two</a> 
<a href="/3.jpg" class="box" rel="box-abc123">Three</a>

但如果圖像是在不同的父元素，如...

<header><a href="/1.jpg" class="box" rel="box-abc123">One</a></header> 
<section><a href="/2.jpg" class="box" rel="box-abc123">Two</a></section> 
<footer><a href="/3.jpg" class="box" rel="box-abc123">Three</a></footer>

...這是行不通的。當然，我可以使用parent（）來跳轉，但我想完全獨立於父元素來構建它（因爲並不總是）。有沒有辦法找到獨立於任何父元素的下一個元素？有人知道如何解決這個問題嗎？謝謝！

來源

2012-10-16 Max Malberg

，如果你不想使用父元素使用slice獲得未來的所有元素

$('a.box[rel="'+boxed+'"]').slice($('a.box[rel="'+boxed+'"]').index(this))

工作小提琴：http://jsfiddle.net/aaWHt/2/

來源

2012-10-16 08:53:23 YogeshWaran

輕微的錯誤在於你在'a.box [rel = ....]'上選擇，但是隻在'a'上索引，所以如果你有任何'a'標籤不正確的結果， t' [rel = ...]' – Joe

yeah夥計好抓。我已經更新了。 – YogeshWaran

索引（） - 幫助我解決問題 - 現在一切正常，因爲我想。非常感謝你！ :) –

我有一個類似的問題，這 - 基本上試圖讓無論它們在dom樹中出現的位置，它都是集合中的下一個元素。最好的解決方案是先循環這些元素，並給它們一個id，然後可以用它來選擇下一個元素。

var nextId = ''; 
var boxLength = $boxSelector.length; 

$boxSelector.on('click', function() { 
    var thisIndex = parseInt(this.id.replace(/[^\d]+/, '')); 
    nextId = (thisIndex == boxLength) ? 1 : thisIndex+1; 
});

然後可以使用選擇下一個元素：

$boxSelector = $('.box[rel="box-abc123"]'); 

$boxSelector.each(function(i, v) { 
    $(this).prop('id', 'box-' + ++i); 
});

然後，您可以通過做一些類似的獲得下.box的id

$('#box-' + nextId);

我明白這並不直接回答你的問題，但你應該能夠應用相同的原則來達到預期的結果。

來源

2012-10-16 09:22:44 billyonecan

不幸的是一些箱子已經有一個ID，所以我不能覆蓋它們。因此我決定使用上面的提示。不過，這是一個很棒的提示 - 非常感謝你！ :) –

jQuery：next父母的所有獨立

回答

相關問題