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

我运行了许多

。每个（）都像这样互相循环：

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>

下面是一个简单的方法：

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

您将返回一个
对象，其中键是
\u
中的id和项目本身-您可以通过删除
结果[r.item（i）.id]['''\u']=r.item（i）行


函数getSelectTree（选择，根）{
根=根| |文档；
var result={}；
for（var i=0，r=root.querySelectorAll（selection[0]）；i
div{display:none；}
正文{font-family:monospace；}














































像这样的事情会让你开始

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: []
    }    
}

如果您需要更多的深度，可以很容易地调整为更递归

看起来您想要在元素ID上建立索引；如果是这样，您将需要嵌套对象，而不是数组。如果没有，您能否显示一些示例HTML以及希望看到的结果JS数组（不是括号中的伪代码），提交表单需要将每个.ui状态默认元素的ID保存在每个.tab窗格元素的ID数组中每个.connected元素的ID数组中。。。如果这有意义的话？基本上，我需要将页面上的每个ID都发布到PHP脚本中，就像它们嵌套在HTML结构中一样，这样我就可以提取顺序/嵌套并保存到数据库中。我假设数组中的数组是最简单的方法。在js中，数组索引从0开始。您还可以提供
B
的样本吗？它应该是
4=>array（…），5=>array（）…
或其他什么？是的，
B
将遵循与
A
完全相同的嵌套结构，等等。在我的控制台中，我得到了一个具有所需结构的对象-谢谢。然而，我的Javascript充其量只是新手——如何将存储在该对象中的数据转换为变量，以便通过表单发布它？您可以使用我的代码片段（刚刚修订）
JSON.stringify（）
函数将其转换为字符串（我的代码片段的输出是字符串），然后使用表单的
post
数据发布它。在服务器端，您可以使用php的
json\u decode（$data，true）对其进行解码当我
var_转储时（json_解码（$_POST['my_array']，true））li
id改为值，这样我就可以保持页面上显示的顺序吗？@mpdc我已经更新了我的帖子，它将使用数组，你可以按顺序循环对象，子对象隐藏在每个对象的子数组中。看看吧，这只是一个小小的修改。
getSelectTree(['.tab-pane','li'])

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: []
    }    
}