Jquery 复杂DOM遍历的最简单方法？

下面是我的代码，它显示了一个具有多个触发器和目标的非常简单的场景。单击div.trigger 1将更改div.target 1的颜色，单击div.trigger 2将更改div.target 2的颜色

我的实际html要复杂得多，因此我需要使用许多方法来遍历DOM，而不是只使用一个next（）。在这种情况下，还有其他解决问题的方法吗

如果代码更加健壮，那么如果触发器和目标元素的相对html结构发生变化，它仍然可以工作，这也将非常好。例如，如果有类似于eq函数的函数使1st div.trigger target成为1st div.target，而使2nd div.trigger target成为2nd 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');        
     }); 
 });​

触发器1
目标1
触发2
目标2
​$（文档）.就绪（函数（）{
$（'.trigger'）。单击（函数（）{
$（this.next（）.css（'background-color'，'red'）；
}); 
});​

谢谢

…例如，如果有类似eq函数的函数，使第一个div.trigger目标成为第一个div.target，使第二个div.trigger目标成为第二个div.target

请尝试以下代码：

相关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());
   });
});

可以使用存储对目标元素的引用

<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');
     });
});​

触发器1
目标1
​$（文档）.就绪（函数（）{
$（'.trigger'）。单击（函数（）{
var$target=$（$（this.data（'target'））；
$target.css（'background-color'，'red'）；
});
});​

此代码如何适用于多个触发器和目标？您是否需要手动将每一个都写出来？