jQuery-获取元素的索引，仅限于类

Question

鉴于以下html：

<div class="my-container">
    <div class="x">
        <a href="#">Link 1</a>
    </div>
    <div class="x">
        <a href="#">Link 2</a>
    </div>
    <div class="x">
        <a href="#">Link 3</a>
    </div>
    <div class="x y">
        <a href="#">Link 4</a>
    </div>
    <div class="x">
        <a href="#">Link 5</a>
    </div>
    <div class="x y">
        <a href="#">Link 6</a>
    </div>
    <div class="x">
        <a href="#">Link 7</a>
    </div>
</div>

哪些元素获得y类-是动态的事物，在运行时会根据不同的用户交互而发生变化。

在将鼠标悬停在锚点上时（我可以假定锚点位于y类的div中，因为只有那些可见），我需要获取其容器的索引（带有y类的div），但仅限于此y班。

含义：

1. 将鼠标悬停在“链接4”上应告诉我： 0 （第一个元素为y ）
2. 将鼠标悬停在“链接6”上应该告诉我： 1 （第二个元素，类y ）

.index()在这里没有帮助我

编辑： @Kevin B我已经阅读了文档，但无法使其正常工作。 我能找到的最接近的东西是将集合传递给我尝试过的.index() 。 但是没有用（同样，他们的集合示例是使用vanilla js document.getElementById-对我不起作用，需要使用类;试图适应：myCollection = $（this）.closest（'。 my-container'）。children（'。y'）并将其传递给.index() ，但无效。 我不会在没有Google-ing的情况下发布文档，也不会浏览文档，不知道为什么会投票（不指责，我不假设我知道是谁）。 仅仅因为我说“ .index（）”对我没有帮助”吗？好吧，我尝试了我认为可以解决的所有事情，但并没有实现它，这就是我发布的原因。

Answer 1

如评论中所述，索引正是您需要的：

$(document).ready(function() {
  //mousein
  $("a").hover(function(){
     var parent = $('.my-container').eq(2); // the 3rd "my-container"
     console.log(parent.find('.y a').index(this)); //-1 if elm doesnt exist
  },
  //mouseout
  function(){

  })
});

Answer 2

如评论中所述，索引正是您需要的：

$(document).ready(function() {
  //mousein
  $("a").hover(function(){
     console.log($(this).index('.y a')); //-1 if elm doesnt exist
  },
  //mouseout
  function(){

  })
});

Answer 3

 var count = 1; $(".my-container div").on('mouseover',function(){ if ($(this).attr("class").indexOf('y') > -1){ alert(count + "th mouseover on y class"); count++; } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="my-container"> <div class="x"> <a href="#">Link 1</a> </div> <div class="x"> <a href="#">Link 2</a> </div> <div class="x"> <a href="#">Link 3</a> </div> <div class="xy"> <a href="#">Link 4</a> </div> <div class="x"> <a href="#">Link 5</a> </div> <div class="xy"> <a href="#">Link 6</a> </div> <div class="x"> <a href="#">Link 7</a> </div> </div>