如何添加类名与无序列表 id 相同的列表项？答案

【问题标题】：How do I add a list item with a class name identical to the unordered list id?如何添加类名与无序列表 id 相同的列表项？
【发布时间】：2016-08-20 14:53:50
【问题描述】：

我正在生成具有不同状态名称作为类名称的项目列表。这些列表项需要附加到具有相同类名但作为 id 的无序列表中。所以目前 DOM 看起来像：

<ul id="Montana"></ul>
<ul id="Nebraska"></ul>
<ul id="Oregon"></ul>
<li class="Montana>Hello World</li>
<li class="Montana>Hello World</li>
<li class="Oregon>Hello World</li>
<li class="Nebraska>Hello World</li>
<li class="Montana>Hello World</li>
<li class="Montana>Hello World</li>
<li class="Oregon>Hello World</li>
<li class="Montana>Hello World</li>

通常我只是通过一个 for 循环来追加：

for(var i =0; i < something.length; i++){ $('#' + something[i]).append('.' + something[i]);

但这目前不起作用。老实说，我可能只是中风了，需要一个耳光。

有什么建议吗？打脸？

编辑：

我返回了一个 JSON blob。它的键/值对之一是“状态”：无论状态是什么。我通过该 blob 运行一个 for 循环，并使用这些类/id 名称创建一堆 ul 和 li。我会展示我所有的代码，但我还添加了一堆 SVG 相关的东西，这些东西只会让问题变得臃肿。

【问题讨论】：

可以使用更多代码上下文...
你的代码中的something是什么？

标签： javascript jquery for-loop append

【解决方案1】：

这行得通吗？获取所有lis，遍历它们，找到与每个lis 类匹配的ID，并附加li。

var lis = document.getElementsByTagName("li");
for(var i = 0, numLis = lis.length; i < numLis; ++i)
{
    document.getElementById(lis[i].className).appendChild(lis[i]);
}

【讨论】：

【解决方案2】：

使用 jQuery：

$('li').each(function(index, li){
   li = $(li);
   li.appendTo($('ul#' + li.attr('class')));
});

【讨论】：

【解决方案3】：

虽然我不知道你为什么将状态名称添加为类/ID，但我不建议将这种东西（通常是页面数据）添加到 html 的属性中（除非你将它添加到'数据' 属性）。通常，类和 id 用于样式和功能，数据应该在单独的元素中（如果应该隐藏，则隐藏）。

您可以改为创建元素层次结构。像这样的：

<li class="state-li">
  <div class="text">
    Hello World
  </div>
  <div class="state-name hidden">
    Montana
  </div>
</li>

那么你可以使用jQuery轻松找到state-li类的孩子

但要回答你的问题（jQuery）：

elementToAppendTo = $('#elementId');
stateList = [list of states];
var length = stateList.length;

for(var i = 0; i < length; i++) {
  $(elementToAppendTo).append("<li id='" + stateList[i] + "'></li>");
}

【讨论】：

【解决方案4】：

感谢大家！我最终巧妙地解决了一个问题：

$('.' + something[i].stateName).appendTo('#' + something[i].stateName);

开始做这个把戏。话虽如此，我很确定你们提供的建议也会奏效。

【讨论】：