javascript - 获取没有公共(public)类Jquery的div的索引

Question

你好，我只是想获取“已经”没有类的 div 的索引，这是我的代码。

 $('#slotMachine #slotMachine2 div.combi:not(.already):first').index();

这是我的 html 代码。

<li id="slotMachine2">
<div class="combi already" data-id="17">JOHN4654</div>
<div class="combi already" data-id="18">JOHN4015</div>
<div class="combi" data-id="19">JOHN1235</div>
<div class="combi already" data-id="20">JOHN0454</div>
<div class="combi already" data-id="21">JOHN1254</div>
<div class="combi already" data-id="22">JOHN0014</div>
<div class="combi already" data-id="23">JOHN1387</div>
<div class="combi already" data-id="24">JOHN2478</div>
<div class="combi" data-id="25">JOHN8475</div>
<div class="combi already" data-id="26">JOHN3597</div>
<div class="combi" data-id="27">JOHN7985</div>
<div class="combi already" data-id="28">JOHN3154</div>
<div class="combi already" data-id="29">JOHN9001</div>
<div class="combi already" data-id="30">JOHN0034</div>
<div class="combi already" data-id="31">JOHN0215</div>
<div class="combi already" data-id="32">JOHN3795</div>
<div class="combi" data-id="33">JOHN1567</div>
<div class="combi already" data-id="34">JOHN6523</div>
<div class="combi already" data-id="35">JOHN7956</div>
<div class="combi" data-id="36">JOHN1547</div>
<div class="combi already" data-id="37">JOHN6872</div>
<div class="combi already" data-id="38">JOHN3487</div>
<div class="combi already" data-id="39">JOHN8392</div>
<div class="combi already" data-id="40">JOHN3432</div>
<div class="combi already" data-id="41">JOHN3412</div>
<div class="combi" data-id="42">JOHN3413</div>
<div class="combi already" data-id="43">JOHN3419</div>
<div class="combi already" data-id="44">JOHN3423</div>
<div class="combi" data-id="45">JOHN3429</div>
<div class="combi" data-id="46">JOHN3427</div></li>

我总是得到的结果是零。先谢谢各位高手了!

Answer 1

需要指定根据哪个集合获取索引。

// cache the selector and based on this get index
var $col = $('#slotMachine #slotMachine2 div.combi');

console.log(
  // get the element within the collection to find index
  // and set it as `index()` methods argument
  $col.index($col.filter(':not(.already):first'))
);

// your code also works if there is siblings as in your html
console.log(
  $('#slotMachine #slotMachine2 div.combi:not(.already):first').index()
)


// or you can set the selector in which look for an element
console.log(
  $('#slotMachine #slotMachine2 div.combi:not(.already):first').index('#slotMachine #slotMachine2 div.combi')
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slotMachine">
  <li id="slotMachine2">
    <div class="combi already" data-id="17">JOHN4654</div>
    <div class="combi already" data-id="18">JOHN4015</div>
    <div class="combi" data-id="19">JOHN1235</div>
    <div class="combi already" data-id="20">JOHN0454</div>
    <div class="combi already" data-id="21">JOHN1254</div>
    <div class="combi already" data-id="22">JOHN0014</div>
    <div class="combi already" data-id="23">JOHN1387</div>
    <div class="combi already" data-id="24">JOHN2478</div>
    <div class="combi" data-id="25">JOHN8475</div>
    <div class="combi already" data-id="26">JOHN3597</div>
    <div class="combi" data-id="27">JOHN7985</div>
    <div class="combi already" data-id="28">JOHN3154</div>
    <div class="combi already" data-id="29">JOHN9001</div>
    <div class="combi already" data-id="30">JOHN0034</div>
    <div class="combi already" data-id="31">JOHN0215</div>
    <div class="combi already" data-id="32">JOHN3795</div>
    <div class="combi" data-id="33">JOHN1567</div>
    <div class="combi already" data-id="34">JOHN6523</div>
    <div class="combi already" data-id="35">JOHN7956</div>
    <div class="combi" data-id="36">JOHN1547</div>
    <div class="combi already" data-id="37">JOHN6872</div>
    <div class="combi already" data-id="38">JOHN3487</div>
    <div class="combi already" data-id="39">JOHN8392</div>
    <div class="combi already" data-id="40">JOHN3432</div>
    <div class="combi already" data-id="41">JOHN3412</div>
    <div class="combi" data-id="42">JOHN3413</div>
    <div class="combi already" data-id="43">JOHN3419</div>
    <div class="combi already" data-id="44">JOHN3423</div>
    <div class="combi" data-id="45">JOHN3429</div>
    <div class="combi" data-id="46">JOHN3427</div>
  </li>
</ul>

---

检查 documentation of index()方法获取更多信息。