Bei der Erstellung des id Attribute für HTML-Elemente, welche Regeln gibt es für den Wert?
Oder alternativ: "es wäre also besser, Jquery zu vermeiden" ;)
Antworten
Zu viele Anzeigen?
Zaheer Ahmed
Punkte
27340
HTML5:
Es beseitigt die zusätzlichen Beschränkungen für den id Attribut ( siehe hier ). Die einzigen verbleibenden Anforderungen (abgesehen von der Eindeutigkeit des Dokuments) sind:
- der Wert muss mindestens ein Zeichen enthalten (darf nicht leer sein)
- er darf keine Leerzeichen enthalten.
Vor-HTML5:
ID sollte übereinstimmen:
[A-Za-z][-A-Za-z0-9_:.]*- Muss Start mit A-Z oder a-z Zeichen
- Kann enthalten
-(Bindestrich),_(Unterstrich),:(Doppelpunkt) und.(Zeitraum)
Aber man sollte vermeiden : y . denn:
Eine ID könnte zum Beispiel mit "a.b:c" bezeichnet sein und in der Formatvorlage als #a.b:c referenziert werden, aber sie könnte nicht nur die id für das Element sein, sondern auch id "a", Klasse "b", Pseudoselektor "c" bedeuten. Es ist am besten, die Verwirrung zu vermeiden und nicht mehr mit . y : insgesamt.
blacksun1
Punkte
359
Bindestriche, Unterstriche, Punkte, Doppelpunkte, Zahlen und Buchstaben sind alle für die Verwendung mit CSS und jQuery gültig. Die folgenden Zeichen sollten funktionieren, aber sie müssen auf der gesamten Seite eindeutig sein und mit einem Buchstaben [A-Za-z] beginnen.
Die Arbeit mit Doppelpunkten und Punkten erfordert ein wenig mehr Arbeit, aber wie das folgende Beispiel zeigt, ist es machbar.
<html>
<head>
<title>Cake</title>
<style type="text/css">
#i\.Really\.Like\.Cake {
color: green;
}
#i\:Really\:Like\:Cake {
color: blue;
}
</style>
</head>
<body>
<div id="i.Really.Like.Cake">Cake</div>
<div id="testResultPeriod"></div>
<div id="i:Really:Like:Cake">Cake</div>
<div id="testResultColon"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var testPeriod = $("#i\\.Really\\.Like\\.Cake");
$("#testResultPeriod").html("found " + testPeriod.length + " result.");
var testColon = $("#i\\:Really\\:Like\\:Cake");
$("#testResultColon").html("found " + testColon.length + " result.");
});
</script>
</body>
</html>
pdc
Punkte
2266
In der Praxis verwenden viele Standorte id Attribute, die mit Zahlen beginnen, auch wenn dies technisch gesehen kein gültiges HTML ist.
El HTML 5 Entwurfsspezifikation lockert die Regeln für die id y name Attribute: Sie sind jetzt nur noch undurchsichtige Zeichenketten, die keine Leerzeichen enthalten dürfen.
Sergio
Punkte
27870
HTML5
Dabei ist zu beachten, dass die ID eindeutig sein muss, d. h. es darf nicht mehrere Elemente in einem Dokument geben, die denselben id-Wert haben.
Die Regeln für ID-Inhalte in HTML5 sind (abgesehen von der Eindeutigkeit):
This attribute's value must not contain white spaces. [...]
Though this restriction has been lifted in HTML 5,
an ID should start with a letter for compatibility.Dies ist die W3 Angaben zur ID (von MDN):
Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values
(for example, they did not permit ID values to begin with a number).
119 Stimmen
Dies unterscheidet sich zwischen HTML5 und früheren Versionen der Spezifikation. Ich habe es hier erklärt: mathiasbynens.be/notes/html5-id-class
5 Stimmen
Mir ist aufgefallen, dass SharePoint 2010 einen Wert wie diesen - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2}-{E60CE5E2-6E64-4350-A884-654B72DA5A53} für eine dynamisch generierte Tabelle innerhalb eines Webparts zuweist und eine Seite, die einen ID-Wert dieser Art enthält, in keinem der gängigen Browser bricht. Der Umgang mit solchen ID-Werten über JavaScript ist allerdings schwierig - mvark.blogspot.in/2012/07/
4 Stimmen
HTML4- und HTML5-Anforderungen für
IDWerte sind sehr unterschiedlich. Hier ist eine schnelle und vollständige Übersicht über HTML5IDRegeln: stackoverflow.com/a/31773673/35972766 Stimmen
Bitte beachten Sie: Wenn Sie so vorgehen, wie es in einigen Antworten steht, und einen Punkt verwenden (
**.**)mit jQuery wird Sie in ziemliche Schwierigkeiten bringen, zum Beispiel, wenn Sie<input id="me.name" />y luego$("#me.name").val()wird jQuery veranlassen, nach einer<me>Tag mit der Klasse.namewas niemand wirklich will!3 Stimmen
@SamSwift Nein, Sie müssen nur Sonderzeichen als Die Ärzte sagen . Bitte prüfen Sie dies Online-Demo .
0 Stimmen
Ich weiß, der OP ist über die Generierung von gültigen IDs fragen (und nicht, wie man jQuery ein vorhandenes DOM), aber, @Faust's Kommentar Weg unten wird sein also nützlich für andere, die vielleicht auf die gleiche Weise gegoogelt haben wie ich. Mit seiner Technik: Ich konnte erfolgreich nach Elementen wie diesem (mit einem Leerzeichen) suchen:
<div id="Usr_order #">...mit einer jQuery-Anweisung wie dieser:$([id='Usr_order #'])1 Stimmen
@mvark GUIDs sind heiß, aber ich habe herausgefunden, dass mit base64 kodierte GUIDs noch heißer sind.
0dea65ca-eac3-489a-944c-0c522b609f78wird kompakt dargestellt alsymXqDcPqmkiUTAxSK2CfeA.