複雜DOM遍歷的最簡單方法？

Question

下面是我的代碼，顯示了一個非常簡單的場景，帶有多個觸發器和目標。點擊div.trigger 1會改變div.target 1的顏色，點擊div.trigger 2會改變div.target 2的顏色。

我的實際html比較複雜，所以不是隻使用下一個（ ），我將需要使用很多方法來遍歷DOM。在這種情況下，還有其他解決問題的方法嗎？

如果代碼更健壯，以至於如果觸發器和目標元素的相對html結構發生了變化，它仍然可以正常工作。例如，如果像eq函數那樣讓第一個div.trigger定位到第一個div.target，第二個div.trigger定位第二個div.target，而不管頁面其餘部分的html如何。

<div class="trigger">trigger 1</div> 
<div class="target">target 1</div> 
<div class="trigger">trigger 2</div> 
<div class="target">target 2</div> 

​$(document).ready(function(){ 
    $('.trigger').click(function(){ 
     $(this).next().css('background-color','red');   
    }); 
});​ 

http://jsfiddle.net/5tcNq/2/

感謝

Answer 1

...例如，如果有類似的EQ功能所作的第一次div.trigger目標第一div.target，第二個DIV .trigger針對第二div.target ...

試試這個代碼：http://jsfiddle.net/JGyc9/

相關JS：

$(function() { 

    var tr = $('.trigger'), 
     tg = $('.target'); 

    tr.on('click', function() { 
     var i = tr.index(this); 
     /* tg.eq(i) is the target */ 


     console.log("your trigger ", $(this).text()); 
     console.log("your target ", tg.eq(i).text()); 
    }); 
}); 

Answer 2

您可以使用data存儲到目標元素的引用。

<div id="trigger1" class="trigger" data-target="#target1">trigger 1</div> 
<div id="target1" class="target">target 1</div> 

​$(document).ready(function(){ 
    $('.trigger').click(function(){ 
     var $target = $($(this).data('target')); 
     $target.css('background-color', 'red'); 
    }); 
});​