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类。

含义：

鼠标悬停在＆＃34; Link 4＆＃34;应该告诉我：0（类y的第一个元素）
鼠标悬停在＆＃34; Link 6＆＃34;应该告诉我：1（类y的第二个元素）

.index()无法帮助我

修改 @Kevin B. 我已经阅读了文档，但无法使其发挥作用。我能找到的最接近的事情是将一个集合传递给我.index()，我已经尝试过了。但是没有工作（同样，他们的集合示例是使用vanilla js document.getElementById - 这对我来说不起作用，需要使用类;尝试适应：myCollection = $（this）。最近的（＆＃39; .my-container＆＃39;）。孩子（＆＃39; .y＆＃39;）并将其传递给.index()，但它没有工作）。我不会先发布google-ing并且也会通过文档发布，不知道为什么会投票（不指责任何指责，我不假设我知道谁是谁它）。只是因为我说＆＃34; .index（）＆＃34;不帮助我＆＃34;？好吧，我已经尝试了我能理解的任何事情，并且无法实现。这就是我发布的原因。

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

jQuery - 获取元素的索引，限制为类

3 个答案: