[英]How to loop through child elements and create nested array of objects?
I have nested checkboxes inside a <ul>
/ <li>
list which can have as parent checkbox with .check-negozio
class.我在
<ul>
/ <li>
列表中嵌套了复选框,它可以作为带有.check-negozio
类的父复选框。 Inside that parent there could be some checkboxes with .check-cassa
class and those could contain other children checkboxes signed with .check-operatore
在该父级中,可能有一些带有
.check-cassa
类的复选框,而那些可能包含其他带有.check-operatore
签名的子级复选框
So html structure is the following and there could be various <li>
with .check-negozio
as parent所以 html 结构如下,可能有各种
<li>
以.check-negozio
作为父
Now i need to build an object that will be as the following现在我需要构建一个如下所示的对象
[{ negozio: npv, cassa: [{ cassa: cs, operatore: [] }] }]
so from the example below, the object must look like this所以从下面的例子来看,对象必须是这样的
[{ negozio: 0, cassa: [{ cassa: 1, operatore: [] }, { cassa: 5, operatore: [0]}] }]
To achieve this, I must loop through each .check-negozio
then inside same loop I have to loop through that .check-negozio
children .check-cassa
and if the .check-cassa
has children .check-operator
loop through them.为了实现这一点,我必须遍历每个
.check-negozio
然后在同一个循环中我必须遍历那个.check-negozio
children .check-cassa
并且如果.check-cassa
有孩子.check-operator
循环通过它们。
I was trying to do the following but $(this).children(".check-cassa").each
seems to be the wrong approach as it doesn't even enter inside that loop... how should I loop through nested elements like this?我试图执行以下操作,但
$(this).children(".check-cassa").each
似乎是错误的方法,因为它甚至没有进入该循环......我应该如何遍历嵌套元素像这样?
$(".check-negozio").each(function() { if (this.checked || this.indeterminate) { // if parent checkbox is checked add it to object const npv = $(this).attr('data-npv'); selezione.negozio = npv; $(this).children(".check-cassa").each(function() { // here i should loop throw children .check-cassa of .check-negozio if (this.checked || this.indeterminate) { // if check-cassa is checked go ahead const cs = $(this).attr('data-cs'); if ($(this).closest('li').has('ul').length) { // here i check if check-cassa contain any child (in this case check-operatore) $(this).children(".check-operatore").each(function() { // if there are child check-operatore loop throw them if (this.checked) { // if checked add data-op inside array of operatore const op = $(this).attr('data-op'); operatore.push({ OP: op }); } }) selezione.cassa.push({ CS: cs, OP: operatore }) // here i add data-cs and array operatore inside object } else { // else if there isn't any child check-operatore just add data-cs with empty array of operatore selezione.cassa.push({ CS: cs, OP: [] }); } } }) config.push(selezione); // adding created object inside array } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <input type="checkbox" class="check-negozio" data-npv="0"> <ul> <li class="nav-item"> <input type="checkbox" class="check-cassa" data-cs="1"> </li> <li> <input type="checkbox" class="check-cassa" data-cs="5"> <ul> <li> <input type="checkbox" class="check-operatore" data-op="0"> </li> </ul> </li> </ul> </li> </ul>
Actually the wrong approach was as @vqf said in comments is to loop throw .check-cassa
by using .check-negozio
as parent when i had to get firstly the parent of .check-negozio
and then loop throw it's children .check-cassa
i used the same approach where i was trying to loop throw .check-operatore
firstly i get parent of .check-cassa
and then looped throw it's children .check-operatore
then i made some adjustment for get the right array of object by initializing object and arrays for check-casse
and check-operatori
inside the parent loop实际上,错误的方法正如@vqf 在评论中
.check-cassa
,当我必须首先获得.check-negozio
的父.check-negozio
,然后循环抛出它的子级.check-cassa
时,通过使用.check-negozio
作为父级来循环 throw .check-cassa
我使用了相同的方法,我试图循环 throw .check-operatore
首先我得到.check-cassa
父.check-cassa
,然后循环抛出它的子级.check-operatore
然后我做了一些调整,通过初始化对象来获得正确的对象数组以及父循环内的check-casse
和check-operatori
数组
here is the working code这是工作代码
var config = [];
$(".check-negozio").each(function () {
var selezione = {};
var cassa = [];
var operatore = [];
if (this.checked || this.indeterminate) { // if parent checkbox is checked add it to object
const npv = $(this).attr('data-npv');
selezione.NPV = npv;
$(".check-cassa", $(this).parent()).each(function () { // here i should loop throw children .check-cassa of .check-negozio
if (this.checked || this.indeterminate) { // if check-cassa is checked go ahead
const cs = $(this).attr('data-cs');
if ($(this).closest('li').has('ul').length) { // here i check if check-cassa contain any child (in this case check-operatore)
$(".check-operatore", $(this).parent()).each(function () { // if there are child check-operatore loop throw them
if (this.checked) { // if checked add data-op inside array of operatore
const op = $(this).attr('data-op');
operatore.push({ OP: op });
}
})
cassa.push({ CS: cs, OP: operatore }) // here i add data-cs and array operatore inside object
} else { // else if there isn't any child check-operatore just add data-cs with empty array of operatore
cassa.push({ CS: cs, OP: [] });
}
selezione.cassa = cassa;
}
})
config.push(selezione); // adding created object inside array
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.