CODEWITHSUNDEEP
javascriptjquery
Thomas Jericho Capuyan
Thomas Jericho Capuyan

Reputation: 85

Get the index of div that has not a common class Jquery

Hello I just wanted to get the index of the div that doesn't have class "already" this is my code.

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

This is my html code.

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

The result I always get is zero. Thank you in advance masters!

Upvotes: 1

Views: 64

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115222

You need to specify based on which collection you need to get index.

// 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>

Check the documentation of index() method for more information.

Upvotes: 1

Poul Kruijt
Poul Kruijt

Reputation: 71911

There are multiple div without the class already.

Your solution has :first in it, which will return an array with just 1 object in it. This will log the indices for every element without the class already:

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

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to get the index of element in set of all combi element:

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

Working Demo

Upvotes: 1

Related Questions