hoverした要素のidと同じ番号を持つidを操作するには？

Question

やりたいこと

下記のようなhtmlがあり、
各リストにhoverした時、そのidと同じ番号を持ったidのclassを変更したいです。
例：リンク1（#link1）をhoverすると、マーク1（#mark1）のclassがoffからactiveに変わり、マウスアウトするとactiveからoffに変わる

<div class="boxA">
<p><a href="#" id="mark1" class="off"></a></p>
<p><a href="#" id="mark2" class="off"></a></p>
<p><a href="#" id="mark3" class="off"></a></p>
<p><a href="#" id="mark4" class="off"></a></p>
</div>

<ul class="listA">
<li id="link1"><a href="#">リンク1</a></li>
<li id="link2"><a href="#">リンク2</a></li>
<li id="link3"><a href="#">リンク3</a></li>
<li id="link4"><a href="#">リンク4</a></li>
</ul>

$(function() {
  $('#link1').hover(function() {
    $('#mark1').addClass('active');
    $('#mark1').removeClass('off');
  }, function() {
    $('#mark1').addClass('off');
    $('#mark1').removeClass('active');
  });
  $('#link2').hover(function() {
    $('#mark2').addClass('active');
    $('#mark2').removeClass('off');
  }, function() {
    $('#mark2').addClass('off');
    $('#mark2').removeClass('active');
  });
//これをすべて繰り返す
});

3つ、4つならまだしも、これが14箇所あり冗長になってしまうため、
うまく書くにはどうしたらよいか悩んでいます。

やってみたこと

下記を参考に書いてみたのですが、うまく行きませんでした。
https://teratail.com/questions/179427

$(document).ready(function(){
  for (var i = 0; i < 15; i++) {
    (function(i){
      $('#link'+i).hover(function(){
        $('#mark'+i).addClass('active');
        $('#mark'+i).removeClass('active');
      },function() {
       $('#mark'+i).addClass('off');
       $('#mark'+i).removeClass('active');
    });
   })(i); // 即時関数
  }
});

簡潔に書くにはどうしたら良いでしょうか？
教えていただけると大変助かります。
よろしくお願いいたします。

Comments

[maisumakun]

使っているjQueryのバージョンはいくつでしょうか？

[yMarch]

ありがとうございます。
2.1.3です。
https://code.jquery.com/jquery-2.1.3.min.js

Answer 1

        $('#mark'+i).addClass('active');
        $('#mark'+i).removeClass('active');

これでは同じクラスを付けて外して、何もしないのと同じことになっています。

Comments

[yMarch]

わ！！！ほんとだ！！！！
うっかり！！！！はずかしい。
ありがとうございます。お手数おかけしてすみません。

Answer 2

解決済みですが、
リストとboxAの子要素の位置が同じものを対象とするということなら、
eq() と index() を使うという方法もあります。

$(function() {
  $('.listA li').hover(function() {
     $('.boxA p a').eq($(this).index())
       .addClass('active').removeClass('off'); 
  }, function() {
     $('.boxA p a').eq($(this).index())
       .addClass('off').removeClass('active');
  });
});

これだとHTMLのそれぞれの子要素にidを付加する必要はなくなります。

<div class="boxA">
  <p><a href="#" class="off"></a></p>
  <p><a href="#" class="off"></a></p>
  <p><a href="#" class="off"></a></p>
  <p><a href="#" class="off"></a></p>
</div>

<ul class="listA">
  <li><a href="#">リンク1</a></li>
  <li><a href="#">リンク2</a></li>
  <li><a href="#">リンク3</a></li>
  <li><a href="#">リンク4</a></li>
</ul>

Comments

[yMarch]

ありがとうございます！
今、eq()とindex()について調べてみたのですが、

index(X）X番目
eq(X)　X番目と一致する要素

というイメージでしょうか？

よりすっきり書けますね！！！すごい！！
ありがとうございます！