在每个（）循环期间将数组添加到数组中

Question

我在彼此内部运行了许多.each()循环，如下所示：

var my_array = [];
$(".btn-submit").click(function(e) {
    e.preventDefault();
    $(".tab-pane").each(function() {
        // add .tab-pane IDs to my_array
        $(this).find(".connected").each(function() {
            // add .connected IDs to tab-pane array
            $(this).find(".ui-state-default").each(function() {
                // add .ui-state-default IDs to connected array
            });
        });
    });
    $("input[name=my_array").val() = my_array;
    $(this).closest("form").submit();
});

在每个.each()中，我想将ID元素添加到my_array，最后嵌套在嵌套在数组内的数组中的数组，并留下一个最终变量，像这样嵌套：

伪代码

my_array (
    tab_pane (
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
    )
    tab_pane (
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
    )
    tab_pane (
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
    )
)

我该如何解决这个问题？

另一个可能澄清事情的基本例子。

考虑以下页面结构。

<div class="tab-pane" id="A">
    <ul class="connected" id="1">
        <li class="ui-state-default" id="101"></li>
        <li class="ui-state-default" id="102"></li>
        <li class="ui-state-default" id="103"></li>
    </ul>
    <ul class="connected" id="2">
        <li class="ui-state-default" id="104"></li>
        <li class="ui-state-default" id="105"></li>
        <li class="ui-state-default" id="106"></li>
    </ul>
    <ul class="connected" id="3">
        <li class="ui-state-default" id="107"></li>
        <li class="ui-state-default" id="108"></li>
        <li class="ui-state-default" id="109"></li>
    </ul>
</div>
<div class="tab-pane" id="B">
    <ul class="connected" id="4">
        <li class="ui-state-default" id="110"></li>
        <li class="ui-state-default" id="111"></li>
        <li class="ui-state-default" id="112"></li>
    </ul>
    <ul class="connected" id="5">
        <li class="ui-state-default" id="113"></li>
        <li class="ui-state-default" id="114"></li>
        <li class="ui-state-default" id="115"></li>
    </ul>
    <ul class="connected" id="6">
        <li class="ui-state-default" id="116"></li>
        <li class="ui-state-default" id="117"></li>
        <li class="ui-state-default" id="118"></li>
    </ul>
</div>
<div class="tab-pane" id="C">
    <ul class="connected" id="7">
        <li class="ui-state-default" id="119"></li>
        <li class="ui-state-default" id="120"></li>
        <li class="ui-state-default" id="121"></li>
    </ul>
    <ul class="connected" id="8">
        <li class="ui-state-default" id="122"></li>
        <li class="ui-state-default" id="123"></li>
        <li class="ui-state-default" id="124"></li>
    </ul>
    <ul class="connected" id="9">
        <li class="ui-state-default" id="125"></li>
        <li class="ui-state-default" id="126"></li>
        <li class="ui-state-default" id="127"></li>
    </ul>
</div>

当我提交表单时，我需要创建一个看起来像这样的数组，所以我可以通过隐藏的输入来发布它：

my_array = array(
    "#A" => array(
        "#1" => array (
            "#101", "#102", "#103"
        )
        "#2" => array(
            "#104", "#105", "#106"
        )
        "#3" => array(
            "#107", "#108", "#109"
        )
    )
    "#B" => array (
        ...
    )
)

Answer 1

这是一个简单的方法：

function getSelectTree(selection, root){
    root = root || document;
    var result = {};
    for(var i = 0, r = root.querySelectorAll(selection[0]); i <  r.length; i++){
        if(r.item(i).id){
           result[r.item(i).id] = getSelectTree(selection.slice(1), r.item(i));
           result[r.item(i).id]['_'] = r.item(i);
       }
    }
    return result;
}

只需使用您要深入查看的订单调用它：

getSelectTree(['.tab-pane','li'])

您将返回Object，其中键是ID，而_中的项目本身 - 您可以通过删除result[r.item(i).id]['_'] = r.item(i);行来省略。

＆＃13;

＆＃13;

function getSelectTree(selection, root){
    root = root || document;
    var result = {};
    for(var i = 0, r = root.querySelectorAll(selection[0]); i <  r.length; i++){
        if(r.item(i).id){
            result[r.item(i).id] = getSelectTree(selection.slice(1), r.item(i)) || [];
            result[r.item(i).id]['_'] = r.item(i);
        }
    }
    return result;
}

var result = getSelectTree(['.tab-pane','.connected','li']);
console.log(result);
document.write(JSON.stringify(result));

＆＃13;

div { display: none; }
body { font-family: monospace; }

＆＃13;

<div class="tab-pane" id="A">
    <ul class="connected" id="1">
        <li class="ui-state-default" id="101"></li>
        <li class="ui-state-default" id="102"></li>
        <li class="ui-state-default" id="103"></li>
    </ul>
    <ul class="connected" id="2">
        <li class="ui-state-default" id="104"></li>
        <li class="ui-state-default" id="105"></li>
        <li class="ui-state-default" id="106"></li>
    </ul>
    <ul class="connected" id="3">
        <li class="ui-state-default" id="107"></li>
        <li class="ui-state-default" id="108"></li>
        <li class="ui-state-default" id="109"></li>
    </ul>
</div>
<div class="tab-pane" id="B">
    <ul class="connected" id="4">
        <li class="ui-state-default" id="110"></li>
        <li class="ui-state-default" id="111"></li>
        <li class="ui-state-default" id="112"></li>
    </ul>
    <ul class="connected" id="5">
        <li class="ui-state-default" id="113"></li>
        <li class="ui-state-default" id="114"></li>
        <li class="ui-state-default" id="115"></li>
    </ul>
    <ul class="connected" id="6">
        <li class="ui-state-default" id="116"></li>
        <li class="ui-state-default" id="117"></li>
        <li class="ui-state-default" id="118"></li>
    </ul>
</div>
<div class="tab-pane" id="C">
    <ul class="connected" id="7">
        <li class="ui-state-default" id="119"></li>
        <li class="ui-state-default" id="120"></li>
        <li class="ui-state-default" id="121"></li>
    </ul>
    <ul class="connected" id="8">
        <li class="ui-state-default" id="122"></li>
        <li class="ui-state-default" id="123"></li>
        <li class="ui-state-default" id="124"></li>
    </ul>
    <ul class="connected" id="9">
        <li class="ui-state-default" id="125"></li>
        <li class="ui-state-default" id="126"></li>
        <li class="ui-state-default" id="127"></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

更新：维护订单

我们不是将元素存储在ID为关键字的对象中，而是将其作为具有嵌套对象的数组，而嵌套对象又将具有children数组。这意味着维持订单：

＆＃13;

＆＃13;

function getSelectTree(selection, root){
    root = root || document;
    var result = [];
    for(var i = 0, r = root.querySelectorAll(selection[0]); i <  r.length; i++){
        if(r.item(i).id){
            result.push({
                id: r.item(i).id,
                item: r.item(i),
                children: getSelectTree(selection.slice(1), r.item(i)),
            });
        }
    }
    return result;
}


var result = getSelectTree(['.tab-pane','.connected','li']);
console.log(result);
document.write(JSON.stringify(result));

＆＃13;

ul { display: none; }

＆＃13;

<div class="tab-pane" id="A">
        <ul class="connected" id="1">
            <li class="ui-state-default" id="101"></li>
            <li class="ui-state-default" id="102"></li>
            <li class="ui-state-default" id="103"></li>
        </ul>
        <ul class="connected" id="2">
            <li class="ui-state-default" id="104"></li>
            <li class="ui-state-default" id="105"></li>
            <li class="ui-state-default" id="106"></li>
        </ul>
        <ul class="connected" id="3">
            <li class="ui-state-default" id="107"></li>
            <li class="ui-state-default" id="108"></li>
            <li class="ui-state-default" id="109"></li>
        </ul>
    </div>
    <div class="tab-pane" id="B">
        <ul class="connected" id="4">
            <li class="ui-state-default" id="110"></li>
            <li class="ui-state-default" id="111"></li>
            <li class="ui-state-default" id="112"></li>
        </ul>
        <ul class="connected" id="5">
            <li class="ui-state-default" id="113"></li>
            <li class="ui-state-default" id="114"></li>
            <li class="ui-state-default" id="115"></li>
        </ul>
        <ul class="connected" id="6">
            <li class="ui-state-default" id="116"></li>
            <li class="ui-state-default" id="117"></li>
            <li class="ui-state-default" id="118"></li>
        </ul>
    </div>
    <div class="tab-pane" id="C">
        <ul class="connected" id="7">
            <li class="ui-state-default" id="119"></li>
            <li class="ui-state-default" id="120"></li>
            <li class="ui-state-default" id="121"></li>
        </ul>
        <ul class="connected" id="8">
            <li class="ui-state-default" id="122"></li>
            <li class="ui-state-default" id="123"></li>
            <li class="ui-state-default" id="124"></li>
        </ul>
        <ul class="connected" id="9">
            <li class="ui-state-default" id="125"></li>
            <li class="ui-state-default" id="126"></li>
            <li class="ui-state-default" id="127"></li>
        </ul>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这样的事情会让你开始

var data = []; // final data array

$(".tab-pane").each(function () {
    var paneObj = createElObj(this);
    data.push(paneObj);   
    $(this).find(".connected").each(function () {
        var listObj = createElObj(this);
        paneObj.children.push(listObj);        
        $(this).find(".ui-state-default").each(function () {
            listObj.children.push(createElObj(this));            
        });
    });
});    


function createElObj(el) {
    return {
        id: el.id,
        tag: el.tagName,
        cls: $(el).attr('class'),
        children: []
    }    
}

如果你需要更深入的话，可以很容易地适应更多的递归

的 DEMO