nehel nehel - 4 months ago 7
HTML Question

jQuery iterate through .each() and give iteration id based on first .each()

Had no idea how to properly name the problem, so apologise for the title if its misleading.

I have a list of

tables
(around 30~) that i'm loading with
ajax
from other file depending on which
li data-id
on the
sidebar menu
user is clicking. And each of the
table
has it's own
id
and each
input
in
td
its own
id
based on
table id
and the numbers of inputs in
table
.

I.e:
table#id_1
has an
input#id_1--input2
(
input2
cus it's the 3rd
input
in this specific
table
).

I could manually do the writing, but i'm sorting my list alphabetically, so if I will want to add a new
table
which will go in the middle of the
list
I will have to rewrite like half of the
table's
and
input's
id's
which is a big nay.

So i'm trying to get a function that can add
id attribute
to
table
and based on
table id
it can set
input id
+ add an index of it at the end of
input
(like in an example above and in the
effect i want
at the end of the snippet).



var div = $('table');

div.each(function(index){
var inputid = index - 2;

$(this).attr('id', 'id_'+index);

$('input').each(function(inputIndex){
$(this).attr('id', 'id_'+inputid+'-input'+inputIndex);
});
});

div{
margin-bottom: 20px;
}

span{
background-color: black;
color: white;
padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>The effect i'm receiving:</span>
<div>
Table 1 //#id_0
<table>
<tr><td>
<label for="">item</label>
<input type="number"> //id_0-input0
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> //id_0-input1
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> //id_0-input2
</td></tr>
</table>
</div>

<div>
Table 2 //#id_1
<table>
<tr><td>
<label for="">item</label>
<input type="number"> //id_0-input3
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> //id_0-input4
</td></tr>
</table>
</div>

<div>
Table 3 //#id_2
<table>
<tr><td>
<label for="">item</label>
<input type="number"> ...
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> ...
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> //input_0-input7
</td></tr>
</table>
</div>

<span>The effect I want:</span>
<div>
Table 1 //#id_0
<table>
<tr><td>
<label for="">item</label>
<input type="number"> //id_0-input0
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> //id_0-input1
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> //id_0-input2
</td></tr>
</table>
</div>

<div>
Table 2 //#id_1
<table>
<tr><td>
<label for="">item</label>
<input type="number"> //id_1-input0
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> //id_1-input1
</td></tr>
</table>
</div>

<div>
Table 3 //#id_2
<table>
<tr><td>
<label for="">item</label>
<input type="number"> //id_2-input0
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> //id_2-input1
</td></tr>
<tr><td>
<label for="">item</label>
<input type="number"> //id_2-input2
</td></tr>
</table>
</div>




Answer

Change your javascript code to this:

var div = $('table');

div.each(function(index){
  var inputid = index;

  $(this).attr('id', 'id_'+index);

  $(this).find('input').each(function(inputIndex){
     $(this).attr('id', 'id_'+inputid+'-input'+inputIndex);
  });
});

Notice the fourthe last line is

$(this).find('input').each(...)

You we're reiterating all the inputs again, instead we're now only iterating the inputs in the div we were iterating over.

As user S McCrohan mentioned in the comments:
var inputid = index - 2;
Is unnecessary and should be:
var inputid = index;

edit: https://jsfiddle.net/xxL5tuvw/

Comments