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

有几点：

您似乎知道name不是label元素的有效属性。所以不要使用它，而是使用data-name。
您错误地使用了label个元素。您使用label的方法有两种：A）将input，select或textarea与内的相关联（{{ 1}}），或使用<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。
您在一个地方使用jQuery，但在其他地方则没有。我建议如果你要在你的页面上有一个库，最好充分利用它。在这种情况下，要访问该属性，如果您使用span属性，请使用$(teams[i]).attr("name")或更好，$(teams[i]).attr("data-name")（请参阅上面的＃1）。（有些人可能会告诉您使用data-*来访问该属性;请注意，这不是它的用途。但您可能会考虑查看它的用途以及是否对您有所帮助。）
.data是一种反模式。它使浏览器循环遍历您正在执行的元素中的所有元素来构建字符串，然后在其右侧附加字符串，然后解析结果，并删除元素中的所有现有元素并将其替换为解析结果。相反，请考虑.innerHTML += "content"
您不会在任何地方声明.insertAdjacentHTML("beforeend", "content")，这意味着您的代码会成为The Horror of Implicit Globals的牺牲品。声明i，或使用不需要索引计数器的任何several other ways to loop。
您的输出会很难读，建议将其分解（可能是每个团队的div？）。
i不是可靠的跨浏览器，有些浏览器会使用textContent。（并且在它们之间如何处理空白方面存在差异。）由于您使用的是jQuery，因此请使用innerText。

...但是，如果您使用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>和map：

join

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

Answer 2

改为使用getAttribute：

teams[i].getAttribute('name')

Answer 3

为什么不使用多个类：

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

和JS：

<script>
var outEl = document.getElementById('printSomeOutputHere');
var teams = $(".team");
for(i=0; i<teams.length; i++)
{
    outEl.innerHTML +=
        (teams[i].hasClass('ally')? 'ally':'enemy') + ": " +
        teams[i].textContent;
}
</script>

Answer 4

来自https://developer.mozilla.org/en-US/docs/Web/API/Element.name：

[The name property] only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>.

由于你使用的是jQuery，我会使用类似的东西：

for(var t in teams){
    $('#printSomeOutputHere').get(0).innerHTML += 
        teams[t].getAttribute("name") 
        + ": " 
        + teams[t].text() 
        + "<BR />";
}

HTML标签名称而不是ID？

4 个答案: