JavaScript初心者です。
解決できずにつまってしまったため皆様のご指摘を頂けたら幸いです。

HTML、CSSにて画像がZ軸で重なった状態で、マウスホバーした時にspanタグで囲んでいる画像をdisplay=noneにして下の画像が出る仕様を行っています。
実際には以下のリストの中に同じclass名で複数liが入ります。

<ul class="img-cont">
      <li class="hover-wrapper hover-wrapper1">   
           <span class="item-wrapper1">
           <img src="#"></span>

            <a href="#">
            <img src="#"></a>
      </li>
    </ul>

以下のようにjQueryにて個別に実装して問題は無さそうなのですが、それぞれのli、spanのclass個数を取得して配列にし、それぞれにホバーイベントを実装するにはどのようにすれば良いでしょうか。

$('.hover-wrapper1').hover(function () {
      $('.item-wrapper1').css('display', 'none');
    }, function () {
      $('.item-wrapper1').css('display', 'inline-block');
    });
    $('.hover-wrapper2').hover(function () {
      $('.item-wrapper2').css('display', 'none');
    }, function () {
      $('.item-wrapper2').css('display', 'inline-block');
    });
    .....

初歩的な質問で申し訳ございませんが、何卒ご指導の程宜しくお願い申し上げます。