Jquery : Get the index of non-siblings elements of the closest class

Question

I'm trying to get the index of a non sibling input[type='text'] element within a particular class. Here is the code :

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="text" /> -> expected value 2
</form>

<form class="myForms">
<input class="myClass" type="text" />  -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="text" /> -> expected value 2
<input class="myClass" type="hidden" /> 
<input class="myClass" type="text" /> -> expected value 3
</form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="hidden" />
<input class="myClass" type="text" /> -> expected value 2
<input class="myClass" type="text" /> -> expected value 3
 </form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
</form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="hidden" /> 
<input class="myClass" type="hidden" /> 
<input class="myClass" type="text" /> -> expected value 2
</form>

I tried this Jquery code :

$(document).on("keyup","input[type='text']",function(e){

var elem = $(this);
var theClosest = elem.closest('.myForms');

// And then :
console.log(elem.index(theClosest));

});

// But, I'm wrong : it always returns -1

How could I fix this?

Thank you a lot for your help !

by closest what do you mean?can we say prev or next? – guradio Jun 23 '16 at 09:28 — guradio, Jun 23 '16 at 09:28

Pranav C Balan · Accepted Answer · 2016-06-23T09:38:13.303

You need to search index from the text input inside the form, so get the inputs and apply index() method with element as parameter. Also you can use :text pseudo class to select text input which helps to reduce the code.

$(document).on("keyup", ":text", function(e) {
  var elem = $(this),
    form = $(this).closest('.myForms');
  console.log(form.find(':text').index(elem));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
</form>

<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="hidden" />
  <input class="myClass" type="text" />
</form>

<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="hidden" />
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
</form>

<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
</form>

<form class="myForms">
  <input class="myClass" type="text" />
  <input class="myClass" type="text" />
  <input class="myClass" type="hidden" />
  <input class="myClass" type="hidden" />
  <input class="myClass" type="text" />
</form>

score 0 · Answer 2 · answered Jun 23 '16 at 09:35

Note that you can simplify this:

input[type='text']

… to this:

:text

What you want is the count of the previous siblings that are of type text:

$(document).on("keyup",":text",function(e){
  var elem = $(this);
  console.log(elem.prevAll(':text').length);
});

Snippet:

$(document).on("keyup",":text",function(e){
  var elem = $(this);
  console.log(elem.prevAll(':text').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="text" /> -> expected value 2
</form>

<form class="myForms">
<input class="myClass" type="text" />  -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="text" /> -> expected value 2
<input class="myClass" type="hidden" /> 
<input class="myClass" type="text" /> -> expected value 3
</form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="hidden" />
<input class="myClass" type="text" /> -> expected value 2
<input class="myClass" type="text" /> -> expected value 3
 </form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
</form>

<form class="myForms">
<input class="myClass" type="text" /> -> expected value 0
<input class="myClass" type="text" /> -> expected value 1
<input class="myClass" type="hidden" /> 
<input class="myClass" type="hidden" /> 
<input class="myClass" type="text" /> -> expected value 2
</form>

Thank you a lot! It's a good solution but I sometimes also use

to organize my forms, in those cases, the index restarts at each subdivision so the other option proposed by Pranav C Balan is more efficient ! — user1719210, Jun 23 '16 at 09:54

Jquery : Get the index of non-siblings elements of the closest class

2 Answers2