jQuery: динамически генерировать массив атрибутов name
У меня есть такая форма:
<form>
<div class="repeatable">
<div class="repeatable">
<div class="repeatable">
<input name="level_three">
<input name="inner_three">
<a>+</a>
</div>
<input name="level_two">
<a>+</a>
</div>
<input name="level_one">
<a>+</a>
</div>
</form>
Знак плюс клонирует весь repeatable
ближе всего к себе. Я хочу, чтобы функция jQuery перебирала repeatable
s и сделать входное имя массивом так:
<form>
<div class="repeatable">
<div class="repeatable">
<div class="repeatable">
<input name="level_three[0][0]">
<input name="inner_three[0][0]">
<a>+</a>
</div>
<div class="repeatable">
<input name="level_three[0][1]">
<input name="inner_three[0][1]">
<a>+</a>
</div>
<input name="level_two[0]">
<a>+</a>
</div>
<div class="repeatable">
<div class="repeatable">
<input name="level_three[1][0]">
<input name="inner_three[1][0]">
<a>+</a>
</div>
<div class="repeatable">
<input name="level_three[1][1]">
<input name="inner_three[1][1]">
<a>+</a>
</div>
<div class="repeatable">
<input name="level_three[1][2]">
<input name="inner_three[1][2]">
<a>+</a>
</div>
<input name="level_two[1]">
<a>+</a>
</div>
<input name="level_one">
<a>+</a>
</div>
</form>
У нас может быть любое количество repeatable
s. В примере всего 3 уровня. Это может 1, 2, 3, 4 или любое число.
1 ответ
$(function(){
$('form > .repeatable').each(function(l1_Index, l1_elem){
$('> .repeatable', l1_elem).each(function(l2_Index, l2_elem){
$('> .repeatable', l2_elem).each(function(l3_Index, l3_elem){
$('input', l3_elem).each(function(input_Index, input_elem){
var computed = (input_Index === 0 ? 'level_three' : 'inner_three') +
'[' + l1_Index + ']' + '[' + l2_Index + ']' ;
$(input_elem).attr('name', computed);
});
});
});
});
});
см. пример кода здесь https://jsbin.com/colocunoqo/edit?html,js,output
ps любой шаблонный lib, как angular, сделает это очень легко для вас
РЕДАКТИРОВАТЬ: с рекурсией https://jsbin.com/sisivucaxe/edit?html,js,output