获取 id 元素内的元素的索引 [重复]答案

【问题标题】：get the index of an element that is inside an id element [duplicate]获取 id 元素内的元素的索引 [重复]
【发布时间】：2020-03-16 17:13:13
【问题描述】：

所以我试图在父元素中单击输入时获取焦点输入的索引，但它不起作用。这是我的sn-p

new Vue({
el: '#container',
data: {
},
methods: {
  enter(){
  console.log($('[name=' + document.activeElement.name + ']').index())
          }
  }
})

input{display: inline-block;}
span{color: grey;font-size: 10px;display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="container">
  <form method="POST" @keyup.enter.prevent="enter">
    <input type="text" placeholder="name"><span>expected input 0</span>
    <input type="email" placeholder="email">
<span>expected input 1</span>
    <input type="password" placeholder="pass">
<span>expected input 2</span>
  </form>
</div>

【问题讨论】：

标签： jquery html vue.js

【解决方案1】：

解决办法：

new Vue({
el: '#container',
data: {
},
methods: {
  enter(){
  //old
  //console.log($('[name=' + document.activeElement.name + ']').index())
  
  //new
  var active = $('[name=' + document.activeElement.name + ']')
  console.log(active.closest('#container').find('input').index(active))
  }
}
})

input{display: inline-block;}
span{color: grey;font-size: 10px;display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="container">
  <form method="POST" @keyup.enter.prevent="enter">
    <input type="text" placeholder="name"><span>expected input 0</span>
    <input type="email" placeholder="email">
<span>expected input 1</span>
    <input type="password" placeholder="pass">
<span>expected input 2</span>
  </form>
</div>

【讨论】：