HTML 标签名称而不是 ID？

Question

我正在制作网站，在那里我创建了许多在输出中分配的标签，如下所示

使用帖子末尾的小提琴链接

<!-- lets say that I want to make a kind of board to show some game clans or... whatever -->

<label class='team' name='ally'>Madcowz</label><BR>
<label class='team' name='ally'>Fluffy Unicorns</label><BR>
<label class='team' name='enemy'>Blue bastards</label><BR><BR>

<b>JS stuff:</b>
<div id='printSomeOutputHere'></div>

<!-- The problem is that the NAME tag does not exist for label in this case: -->
<!-- I can't use ID because ID should be unique values -->
<script>
var teams = $(".team");
for(i=0; i<teams.length; i++)
{
    document.getElementById('printSomeOutputHere').innerHTML += teams[i].name + ": " + teams[i].textContent;
    document.getElementById('printSomeOutputHere').innerHTML += "<BR>";
}
</script>

小提琴：http : //jsfiddle.net/cusnj74g/

name 属性未定义，所以如果我不能使用（我可以，但我不应该）ID，我如何用相同的名称标记这些标签

Answer 1

几点：

1. 您似乎知道这name不是label元素的有效属性。所以不要使用它，data-name而是使用它。

2. 您使用的label元素不正确。有你使用两种方法label：A）通过将input，select或者textarea它涉及到内部它（<label><input type="checkbox"> No spam please</label>），或通过使用for属性，将其与文件中的其他地方的要素之一（关联<label for="no-spam-please">No spam please</label>...<input id="no-spam-please" type="checkbox">）。有一个label没有控制权，没有for是相当没有意义的；只需使用一个span.

3. 您在一个地方使用 jQuery，但在其他地方没有。我建议，如果您打算在您的页面上有一个库，最好充分利用它。在这种情况下，要访问属性，如果您使用的是属性$(teams[i]).attr("name")，$(teams[i]).attr("data-name")则最好使用或 更好data-*（请参阅上面的 #1）。（有些人可能会告诉您使用.data来访问该属性；不要，这不是它的用途。但您可能会考虑查看它的用途以及这是否对您有帮助。）

4. .innerHTML += "content"是一种反模式。它使浏览器循环遍历您正在执行的元素中的所有元素以构建一个字符串，然后在右侧附加字符串，然后解析结果，并删除元素中的所有现有元素并将它们替换为解析结果。相反，考虑.insertAdjacentHTML("beforeend", "content")

5. 你没有i在任何地方声明，这意味着你的代码会成为隐式全局的恐怖的牺牲品。声明i或使用其他几种不需要索引计数器的循环方式。

6. 您的输出将很难阅读，建议将其分解（也许每个团队都有一个 div？）。

7. textContent不是可靠的跨浏览器，一些浏览器使用innerText代替。（并且它们之间处理空格的方式有所不同。）由于您使用的是 jQuery，因此请使用text.

...但是是的，如果您使用.getAttribute("name")而不是.name. 浏览器甚至可以通过getAttribute. 它们只是不一定为它们创建反射属性。

这是一个应用了上述各种评论的版本：

var output = $("#printSomeOutputHere");
$(".team").each(function() {
  var $this = $(this);
  output.append("<div>" + $this.attr("data-name") + ": " + $this.text() + "</div>");
});

<span class='team' data-name='ally'>Madcowz</span><BR>
<span class='team' data-name='ally'>Fluffy Unicorns</span><BR>
<span class='team' data-name='enemy'>Blue bastards</span><BR><BR>

<b>JS stuff:</b>
<div id='printSomeOutputHere'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

...或者为了避免重复追加，我们可以使用mapand join：

$("#printSomeOutputHere").append(
  $(".team").map(function() {
    var $this = $(this);
    return "<div>" + $this.attr("data-name") + ": " + $this.text() + "</div>";
  }).get().join("")
);

<span class='team' data-name='ally'>Madcowz</span><BR>
<span class='team' data-name='ally'>Fluffy Unicorns</span><BR>
<span class='team' data-name='enemy'>Blue bastards</span><BR><BR>

<b>JS stuff:</b>
<div id='printSomeOutputHere'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>