In der Mitte der Klassenliste einfügen

Question

Ich entwickle gerade eine JQuery-Anwendung für meinen eigenen persönlichen Gebrauch und als eine Abkürzung, ich treffe eine Entscheidung basierend auf der letzten Klasse in der Liste, die immer eine Art Kennung ist.

$("#myelement").attr('class').split(/\s+/).pop() 

Die Klassen des Elements sind so etwas wie: Das ist in einer Reihe von Orten wie geschehen

class1 class2 class_with_id 

Das Problem ist, dass jetzt habe ich eine Stelle im Code, wo ich versuche, eine Klasse zu der Liste hinzuzufügen, die ich in der Regel wie folgt tun würde:

$("#myelement").addClass("newclass") 

jedoch, dass die Klassen wie folgt aussehen macht:

class1 class2 class_with_id newclass 

Und die ID-Klasse zu einem späteren Zeitpunkt schlägt fehl. Ich habe es mit dieser Arbeit:

$("#myelement").attr('class', "newclass " + $("#myelement").attr('class')) 

, dass es den Anfang ist das Hinzufügen:

newclass class1 class2 class_with_id 

Ich habe zwei Fragen, die beide ähnliche:

1. Ist das die einfachste/einfachste Weg, um es am Anfang hinzuzufügen?

2. Gibt es eine einfache Möglichkeit, die Klasse in der Mitte des Satzes hinzuzufügen, ohne ausgefallene String-Manipulation. I.e. sagen, dass ich wollte, dass es das zweite letzte Element sein:

   class1 class2 newclass class_with_id 
   

Answer 1

Wie in den Kommentaren erwähnt besser data-* attributes für diesen Zweck zu verwenden, weil es keine gute Praxis ist Attributklasse zu verwenden, wie Sie jetzt tun, es ist nicht für die Fälle gemacht, so zum Beispiel ersetzen:

$("#myelement").attr('class').split(/\s+/).pop(); 

von:

$("#myelement").data('with-id'); 

Um das Attribut data-with-id, zu erhalten und durch hinzufügen:

$("#myelement").data('with-id','some value'); 

Statt:

$("#myelement").addClass("newclass"); 

Hoffnung, das hilft.

Answer 2

1. Ja.

2. Nicht dass ich mir dessen bewusst bin.

   Das Klassenattribut ist ein String, so dass ich ohne irgendeine Art von String-Manipulation keine Möglichkeit sehen kann, das zu tun, wonach Sie suchen.

   var original = 'class1 class2 class_with_id'; 
   var newClass = 'new_class'; 
   var index = original.lastIndexOf(' '); 
   var updated = original.slice(0, index) + ' ' + newClass + original.slice(index); 
   

   Geben Sie class1 class2 new_class class_with_id.

   Eine weitere Option ist die Erstellung einer eigenen Spleiß- oder Einfügemethode für Strings.

   String.prototype.insert = function (index, string) { 
       if (index > 0) 
       return this.substring(0, index) + string + this.substring(index, this.length); 
       else 
       return string + this; 
   }; 
   
   var original = 'class1 class2 class_with_id'; 
   var newClass = 'new_class'; 
   var index = original.lastIndexOf(' '); 
   var updated = original.insert(index, ' ' + newClass); 
   

Hinweis: im Gegensatz zu Ihrer aktuellen Methode Als Karl-André Gagnon erklärt hat .. Sie wäre besser dran, als ein benutzerdefiniertes Daten-Attribut. Sie können feststellen, dass Ihre Methode Sie davon abhält, Plugins zu verwenden, die Klassen ändern.

Answer 3

Ich bin nicht ganz sicher, warum Sie die Klassen verwenden. Aber angenommen, dass Sie aus irgendeinem Grund keine Daten wie die vorgeschlagenen verwenden können und lieber Klassen verwenden, können Sie eine jquery-Funktion erstellen, um sie einfach aufrufen zu können.

$.fn.addClassAt = function(index, newClass){ 
    var classArray = $(this).attr('class').split(' '); 
    classArray.splice(index, 0, newClass); 
    var newClassStr = classArray.join(' '); 
    return $(this).attr('class', newClassStr); 
} 

Sie können nun diese verwenden als

$ ("# myElement"). AddClassAt (2, 'NewClass')