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>