Javascript-动态更改ID？_Javascript_Html

Javascript-动态更改ID？

javascript html

Javascript-动态更改ID？,javascript,html,Javascript,Html,我已经问过好几次了，但我无法正确地表达我的问题，所以我想我会再试一次：我想做一张表格。结构将是： <html> <head> <script type="text/javascript"> </script> <style type="text/css"> ul { list-style-type:none; } </style> </head> <body> <input type="

我已经问过好几次了，但我无法正确地表达我的问题，所以我想我会再试一次：

我想做一张表格。结构将是：

<html>
<head>
<script type="text/javascript">

</script>
<style type="text/css">
ul {
list-style-type:none;
}
</style>
</head>

<body>

<input type="text" value="Menu 1 Name" />
<input type="button" value="Remove Menu" />
<ul>
<li><input type="text" value="Option 1" /><input type="button" value="Remove Option" /></li>
<li><input type="text" value="Option 2" /><input type="button" value="Remove Option" /></li>
<li><input type="button" value="Add Option" /></li>
</ul>
<input type="text" value="Menu 2 Name" />
<input type="button" value="Remove Menu" />
<ul>
<li><input type="text" value="Option 1" /><input type="button" value="Remove Option" /></li>
<li><input type="text" value="Option 2" /><input type="button" value="Remove Option" /></li>
<li><input type="button" value="Add Option" /></li>
</ul>
<input type="text" value="Menu 3 Name" />
<input type="button" value="Remove Menu" />
<ul>
<li><input type="text" value="Option 1" /><input type="button" value="Remove Option" /></li>
<li><input type="text" value="Option 2" /><input type="button" value="Remove Option" /></li>
<li><input type="button" value="Add Option" /></li>
</ul>
<input type="button" value="Add Menu" />
</body>
</html>


保险商实验室{
列表样式类型：无；
}

我需要能够得到的菜单名和菜单选项的形式数据，无论有多少菜单和选项。我在考虑做一些事情，制作一个变量放入菜单的id中，另一个变量用于菜单选项，然后进行for循环，直到它从所有表单获取信息

问题是，我希望菜单ID和选项ID始终保持有序，无论它们添加或删除菜单多少次。例如，假设我有三个选项，ID分别为Menu1Option1、Menu1Option2和Menu1Option3。如果删除第二个选项，它将显示第一个和第三个选项。因为只有两个选项，所以我希望第三个选项的ID变成Menu1Option2。我能想到的唯一方法是在每次添加菜单时为选项数量创建一个新变量，然后使用该变量确定选项的id，当删除一个选项时，根据删除的选项id重新标识所有选项

如果你明白我想做什么，你能告诉我怎么做吗？我敢肯定我在这里完全偏离了方向。我猜更好的方法不是标识每个菜单和选项，而是将它们组合成一个数组？它似乎更适合我想要的，但我不知道怎么做。

如果你不关心具体的ID，就不要给他们具体的ID。DOM已经为您保留了所有元素的树。您不需要保留单独的菜单项数组。只需让DOM成为您的数据结构，并使用DOM API和/或jQuery访问您想要的内容

$('.menuItem').each(function (index, item) { //Do what you need here. });

请参见

如果您不关心特定的ID，请不要给他们特定的ID。DOM已经为您保留了所有元素的树。您不需要保留单独的菜单项数组。只需让DOM成为您的数据结构，并使用DOM API和/或jQuery访问您想要的内容

$('.menuItem').each(function (index, item) { //Do what you need here. });

请参见

，而不是动态更改ID。我想你可以换一个想法：

1）假设要根据菜单/选项提交结果，是否可以使用wrapData（）加载信息：

function wrapData(){
    var data = [];
    $('.menu').each(function(){
        var $t = $(this);
        var m = {'name': $t.val(), 'options': []};
        $t.nextAll('ul:eq(0)').find('[type=text]').each(function(){
            m.options.push({'name': $(this).val()});
        });
        data.push(m);
    });
    return data;
}

2）如果要从数据呈现用户界面，可以调用loadData（），类似于：

function loadData(data){
    for(var i = 0; i < data.length; i++){
        // generating menus
        for(var j = 0; j < data[i].options.length; j++){
            // generating options
        }
    }
    // finally update your user interface
}

window.menus = [{name: "Menu 1", options: 
                   [{value: "Option 1" }, 
                    {value: "Option 2" }
                   ]
                },
                {name: "Menu 2", options: 
                   [{value: "Option 2.1" }, 
                    {value: "Option 2.2" }
                   ]
                }];

函数加载数据（数据）{
对于（变量i=0；i


请从
更新
我已经在没有jquery的情况下编写了另一个完整的解决方案，但是我意外地关闭了broswer而没有保存。所以我使用jquery编写了这个更简单的解决方案。事实上，使用一个框架，不管它是什么，都会有所帮助。您可以看到下面的代码更加清晰，并且更易于以后维护
html:







js:
函数wrapData（）{
var数据=[]；
$（'.menu'）。每个（函数（）{
var$t=$（本）；
var m={'name'：$t.val（），'options'：[]}；
$t.nextAll（'ul:eq（0）'）。查找（'[type=text]'）。每个（函数（）{
m、 push（{'name'：$（this.val（）}）；
});
数据推送（m）；
});
返回数据；
}
$（文档）.ready（函数（）{
$（'[value=“Remove Option”]'）。live（'单击'，函数（））{
$（this）.最近（'li'）.remove（）；
});
$（'[value=“addoption”]'）。live（'单击'，函数（））{
$（this）.最近（'li'））
。之前（“”）；
});
$（'[value=“Add Menu”]'）。live（'单击'，函数（））{
美元（本）。在（“”）之前；
});
$（'[value=“Remove Menu”]'）。live（'单击'，函数（））{
var$t=$（本）；
$t.next（）.remove（）；
$t.prev（）.remove（）；
$t.remove（）；
});
$（'[value=“Wrap Data”]'）。live（'单击'，函数（））{
log（wrapData（））；
});
})

在
处尝试，而不是动态更改ID。我想你可以换一个想法：
1） 假设要根据菜单/选项提交结果，是否可以使用wrapData（）加载信息：
function wrapData(){
    var data = [];
    $('.menu').each(function(){
        var $t = $(this);
        var m = {'name': $t.val(), 'options': []};
        $t.nextAll('ul:eq(0)').find('[type=text]').each(function(){
            m.options.push({'name': $(this).val()});
        });
        data.push(m);
    });
    return data;
}

2） 如果要从数据呈现用户界面，可以调用loadData（），类似于：
function loadData(data){
    for(var i = 0; i < data.length; i++){
        // generating menus
        for(var j = 0; j < data[i].options.length; j++){
            // generating options
        }
    }
    // finally update your user interface
}

window.menus = [{name: "Menu 1", options: 
                   [{value: "Option 1" }, 
                    {value: "Option 2" }
                   ]
                },
                {name: "Menu 2", options: 
                   [{value: "Option 2.1" }, 
                    {value: "Option 2.2" }
                   ]
                }];

函数加载数据（数据）{
对于（变量i=0；i

请从
更新
我已经在没有jquery的情况下编写了另一个完整的解决方案，但是我意外地关闭了broswer而没有保存。所以我使用jquery编写了这个更简单的解决方案。事实上，使用一个框架，不管它是什么，都会有所帮助。您可以看到下面的代码更加清晰，并且更易于以后维护
html:







js:
函数wrapData（）{
var数据=[]；
$（'.menu'）。每个（函数（）{
var$t=$（本）；
var m={'name'：$t.val（），'options'：[]}；
$t.nextAll（'ul:eq（0）'）。查找（'[type=text]'）。每个（函数（）{
m、 push（{'name'：$（this.val（）}）；
});
数据推送（m）；
});
返回数据；
}
$（文档）.ready（函数（）{
$（'[value=“Remove Option”]'）。live（'单击'，函数（））{
$（this）。最近（'li'）。re
window.removeOption = function(menuIndex, optionIndex) {
    menus[menuIndex].options.splice(optionIndex, 1);
    render();
};

window.removeMenu = function(menuIndex) {
    menus.splice(menuIndex, 1);
    render();
};

window.addMenu = function() {
    var menuName = prompt("Enter a menu name:", "Menu " + menus.length);
    menus.push({name: menuName, options:[]});
    render();
};

window.addOption = function(menuIndex) {
    var optionValue = prompt("Enter a default value:", "Option " + menus[menuIndex].options.length);
    menus[menuIndex].options.push({value: optionValue}); 
    render();
};