共通のクラスを持たないdivのインデックスを取得するJquery

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()方法を確認してください。

Answer 2

すべてのコンビ要素の集合の要素のインデックスを取得する必要があります。

var combiDivs = $('#slotMachine2 div.combi'); 
var firstAlreadyIndex = combiDivs.index(combiDivs.filter(':not(.already)').first()); 

Working Demo

Answer 3

複数divはクラスalreadyなしがあります。

あなたの解決策には:firstが含まれています。その中にオブジェクトが1つしかない配列が返されます。これは、クラスalreadyせずにすべての要素のインデックスをログに記録します。

$('#slotMachine #slotMachine2 div.combi').each(function(index, el) { 
    if(!$(el).is('.already')) { 
     console.log(index); 
    } 
});