Question

我正在生成一个具有不同州名作为类名的项目列表。这些列表项需要附加到具有相同类名但作为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。它的一个键/值对是＃34; state＆＃34;：无论状态如何。我通过该blob运行for循环，并创建了一堆具有这些class / id名称的ul和li。我展示了我的所有代码，但我还添加了一堆与SVG相关的东西，这些东西会让问题变得臃肿。

Answer 1

这会有用吗？获取所有li，遍历它们，找到与每个li类匹配的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]);
}

Answer 2

使用jQuery：

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

Answer 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>");
}

Answer 4

感谢大家！我结束了f :::

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

进入诀窍。话虽如此，我很确定你们所提出的建议也会奏效。

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

4 个答案: