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 класс - это динамичная вещь, которая изменяется во время выполнения на основе различных взаимодействий пользователей.

На мыши над якорем (я могу предположить, что якорь находится в DIV с y класса, потому что только те видны), мне нужно, чтобы получить индекс это контейнер (который ДИВ с y класса), но ограничивается этим классом y.

Значение:

1. Mouseover на "Link 4" должны сказать мне: 0 (первый элемент с классом y)
2. при наведении курсора мыши на "Ссылка 6" должен сказать мне: 1 (второй элемент с классом y)

.index() не помогает мне здесь

EDIT: @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

As сказал в комментариях, индекс именно то, что вам нужно:

$(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="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>