Benutzerdefinierte Jquery-Attribute

Lesezeit: 4 Minuten

Benutzer-Avatar
Jose3d

Ich denke darüber nach, benutzerdefinierte Attribute in Jquery zu verwenden, um die Verwendung von Klassen- oder ID-Attributen zu vermeiden und die HTML-Designer nicht zu stören.

Unter Berücksichtigung dieser Idee sollte der HTML-Code wie folgt aussehen:

<ul Jquery="CommonUl">
    <li Jquery="CommonLi"></li>     
    <li Jquery="CommonLi"></li>
    <li Jquery="CommonLi"></li>
    <li Jquery="CommonLi"></li>
    <li Jquery="CommonLi"></li>
</ul>
  • Halten Sie das für einen guten Ansatz?

  • Was halten Sie von der W3C-Validierung dieser benutzerdefinierten Attribute?

  • Kennen Sie eine Möglichkeit, mit Jquery zu programmieren, ohne die Arbeit der HTML-Designer zu stören?

  • In Bezug auf die Leistung nehme ich an, dass die Jquery-Selektoren mit Klassenattributen oder IDs schneller sind als die Verwendung eines benutzerdefinierten Attributs und Filterfunktionen wie “enthält usw. …”. Ist das richtig?

  • Meine Meinung zur W3C-Validierung dafür ist, dass sie fehlschlagen wird. 🙂 Kennen Sie sich mit jQuery aus? .data()? (Es hilft jedoch nicht, wenn Sie die Daten direkt im Markup speichern müssen.)

    – Pekka

    10. November 2010 um 14:47 Uhr


  • Eigentlich @Pekka wird es mit jQuery 1.4.3! Ein Anruf bei .data("foo") wird den Wert von abholen data-foo="value" auf einem Element.

    – Spitze

    10. November 2010 um 14:50 Uhr

  • @ Pointy ja, aber data-* ist in HTML 4 nicht gültig…

    – Pekka

    10. November 2010 um 14:51 Uhr

  • Oh ja, das stimmt, @Pekka, aber all die coolen Leute benutzen jetzt HTML5 🙂

    – Spitze

    10. November 2010 um 14:52 Uhr

  • @Spitz ja! 🙂 Aber es ist noch nicht jedermanns Sache. Nicht mit der fleckigen Browserunterstützung….

    – Pekka

    10. November 2010 um 14:55 Uhr


Benutzer-Avatar
Nick Craver

Sie können dies tun, verwenden data- Attribute obwohl (Teil der HTML5-Spezifikation), so was:

<li data-something="CommonLi"></li> 

jQuery hat sogar eingebaute Unterstützung für diese in 1.4.3+, zum Beispiel:

$("li").data("something") //"CommonLi"

Zu deinen anderen Fragen:

  • Sie werden bestätigen wenn es HTML5 ist – wird es aber nicht Unterbrechung alles in HTML4
  • Dies sollte den Designer nicht stören, aber es hängt davon ab die Designer
  • Wenn Sie von einem Element abrufen, ist die Leistung die gleiche wie bei jedem anderen Attribut

  • Dies ist jedoch in HTML 4 ungültig. Wenn es also wichtig ist, ältere Browser zu unterstützen und W3C-gültig zu sein, ist dies leider keine Option. Wenn das kein Problem ist, ist dies der beste Weg

    – Pekka

    10. November 2010 um 14:52 Uhr


  • @Pekka – Ich stimme zu, aber 100% gültig zu sein ist nicht so wichtig wie 100% funktionsfähig zu sein … wenn es keine Lücke in der Spezifikation gäbe, wo diese benötigt würden, wären sie nicht in HTML5 hinzugefügt worden 🙂 Das Erhöhen des HTML5 DOCTYPE sollte hier für beide Seiten sorgen.

    – Nick Craver

    10. November 2010 um 14:59 Uhr

  • Hallo, vielen Dank im Voraus … Tolle Antwort. Die Sache ist, dass wir HTML 5 wahrscheinlich nicht verwenden werden, da es anscheinend nicht vor 2012 fertig sein wird.

    – Jose3d

    10. November 2010 um 15:02 Uhr

  • @ Nick ja, stimmt. Ich meinte es eher als Randbemerkung, wenn Sie W3c-Validität benötigen, zB für einen Build-Prozess – der möglicherweise einen anderen Weg benötigt, bis HTML 5 vollständig verwendet werden kann.

    – Pekka

    10. November 2010 um 15:03 Uhr

  • HINWEIS: data-something muss offensichtlich nur in Kleinbuchstaben geschrieben werden, da die Verwendung eines Großbuchstabens im Teil “something” nicht funktioniert. Ich weiß nicht, ob dies die offizielle Spezifikation oder nur die Interpretation von Chrome ist.

    – lucian303

    19. Juni 2013 um 20:38 Uhr

Wenn Sie mehrere Attribute haben möchten, schlage ich vor, ein eindeutiges Namespace-Attribut festzulegen, z

<li data-yourapp>...</li>

und verwenden Sie dieses Attribut wie eine Hashtabelle

$("li").data("yourapp", { 
   points  : 2000,
   life    : 1,
   weapons : {
      firegun  : 0,
      missiles : 12
   }
});

Auf diese Weise reduzieren Sie den Elementzugriff und rufen alle benutzerdefinierten Daten einmal ab

  • Schön… wusste nicht, dass du das kannst.

    – Adam

    21. April 2011 um 8:56 Uhr

Ich würde Ihnen persönlich empfehlen, die integrierte Methode von jquery zum Speichern von Daten mit jedem Element zu verwenden. Folgendes ist das Code-Snippet zum Speichern von Daten:

$("ul").data("CommonUl");
$("li").data("CommonLi");

  • Zunächst einmal danke … Ich kannte diese Art, Daten für jedes Element zu speichern, nicht. Die Sache ist die, dass ich wahrscheinlich nicht so etwas sagen muss wie: “Alle Ul’s und Li’s werden die folgenden Daten angehängt haben”, stattdessen wird es einige spezifische Elemente geben (vielleicht gibt es auf der Seite 4 ul, und ich werde mich gerne bewerben dies zu einem und nicht nach Position) … Mit freundlichen Grüßen.

    – Jose3d

    10. November 2010 um 14:57 Uhr


1229690cookie-checkBenutzerdefinierte Jquery-Attribute

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy