如何使用 jQuery 匹配两行内两个锚点的索引？

Question

我有一个包含两排 link 的容器。我需要向 link 的两个 link 添加一个 nav_link--hover class 到同一个地方，它们在父 div 中也有相同的索引号。

如何使用索引号而不是仅在容器索引中找到的第一个锚点来更新它以匹配两个锚点？

例如，如果我将鼠标悬停在第四个 link 上，我希望 nav_link--hover class 应用于第二个 link（在第一行）并且第二个link（在第二行）。

<nav class="nav_container">
  <div class="row-one">
    <a href="#a" class="nav_link">
      <div class="nav_image sprite-cat"><img></div>
    </a>
    <a href="#b" class="nav_link">
      <div class="nav_image sprite-cat2"><img></div>
    </a>
  </div>
  <div class="row-two">
    <a href="#a" class="nav_link">
      <div class="nav_text">Item One</div>
    </a>
    <a href="#b" class="nav_link">
      <div class="nav_text">Item Two</div>
    </a>
  </div>
</nav>

<script>
var $container = $('.nav_container');

$('.nav_link').each(function(i) {
  $(this).on({
    mouseover: function() {
      $container.find('.nav_link').eq(i).addClass('nav_link--hover');
    },
    mouseout:  function() {
      $container.find('.nav_link').eq(i).removeClass('nav_link--hover');
    }
  });
});
</script>

Answer 1

试试这个：

$('.nav_link').each(function(i) {
  $(this).on({
    mouseover: function() {
      // get the href link
      var link = $(this).prop('href');
      //get the anchor
      var hash = link.substring(link.indexOf("#")+1);
      // find all the a tags with href = #anchor, and add css class
      $("a[href='#"+hash+"']").addClass('nav_link--hover');
    },
    mouseout:  function() {
      var link = $(this).prop('href');
      var hash = link.substring(link.indexOf("#")+1);
      $("a[href='#"+hash+"']").removeClass('nav_link--hover');
    }
  });
});

还有 updated fiddle

Answer 2

如果您想要索引，可以使用 index() 和 nth_child 来定位该索引的所有子项等。

var $container = $('.nav_container');

$('.nav_link').on({
    mouseenter: function() {
        $('.nav_link:nth-child(' + ($(this).index() + 1) + ')').addClass('nav_link--hover');
    },
    mouseleave:  function() {
      $('.nav_link:nth-child(' + ($(this).index() + 1) + ')').removeClass('nav_link--hover');
    }
});

FIDDLE

Answer 3

你快到了。

更新了您的 fiddle https://jsfiddle.net/qxatn2d1/

$('.nav_link').each(function(i) {
  $(this).on({
    mouseover: function() {
      $('a[href="'+ $(this).attr('href') +'"]').addClass('nav_link--hover');
    },
    mouseout:  function() {
        $('a[href="'+ $(this).attr('href') +'"]').removeClass('nav_link--hover');
    }
  });
});

成功了。它正在寻找具有相同 href 的所有 a 元素。我更愿意更改您的 html 但对于这个具体问题，我认为这是您的解决方案..

希望这对您有所帮助，干杯。

如何使用 jQuery 匹配两行内两个锚点的索引？

How to match the index of two anchors within two rows using jQuery?

javascript

jquery

jquery-selectors