如何遍歷子元素並創建嵌套的對象數組？

Question

我在<ul> / <li>列表中嵌套了復選框，它可以作為帶有.check-negozio類的父復選框。 在該父級中，可能有一些帶有.check-cassa類的復選框，而那些可能包含其他帶有.check-operatore簽名的子級復選框

所以 html 結構如下，可能有各種<li>以.check-negozio作為父

現在我需要構建一個如下所示的對象

[{ negozio: npv, cassa: [{ cassa: cs, operatore: [] }] }] 

所以從下面的例子來看，對象必須是這樣的

[{ negozio: 0, cassa: [{ cassa: 1, operatore: [] }, { cassa: 5, operatore: [0]}] }] 

為了實現這一點，我必須遍歷每個.check-negozio然后在同一個循環中我必須遍歷那個.check-negozio children .check-cassa並且如果.check-cassa有孩子.check-operator循環通過它們。

我試圖執行以下操作，但$(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>

Answer 1

實際上，錯誤的方法正如@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數組

這是工作代碼

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