Suche nach Div Klassen mit Regex

Question

Klingt einfach, huh. Viele Antworten, die ich gefunden habe, aber alle verwenden jQuery oder ProtoType. Ich möchte einfaches JavaScript. Es sollte nicht so schwer sein, aber JavaScript ist nicht mein Ding; Keine zentrale Dokumentation bedeutet, nach Alter zu suchen und nicht zu finden, was ich will.

Betrachten Sie den folgenden HTML-Code-Schnipsel:

<div class="central_0"> .. </div> 
<div class="central_1"> .. </div> 
<div class="central_2"> .. </div> 

Jetzt möchte ich JavaScript verwenden, Dinge mit den DIVs zu tun.

function processDivElements() 
{ 
// search for relevant DIV classes 
var divArray = document.getElementsByClass.regex('/^central_.*$/'); 

// do stuff with the DIV elements found 
foreach (divArray as divElement) 
{ 
    divElement.style.background = '#f00'; 
}; 
} 

Kann mir jemand helfen, diese Ebene JavaScript, um die ordnungsgemäße zu übersetzen? Ich benutze Klassen, keine IDs. Ich bevorzuge einen regulären Ausdruck.

Answer 1

Die jQuery-Lösung ist wirklich schön:

var $divs = $('div[class^="central_"]'); 

Wenn Sie nur neuere Browser unterstützen möchten, können Sie document.querySelectorAll() im Wesentlichen die gleiche Sache zu tun verwenden können:

var divs = document.querySelectorAll('div[class^="central_"]'); 

Wenn Sie unterstützen möchten ältere Browser, der Code wird schrecklich:

Auch:

Ich verwende Klassen, keine IDs. Ich bevorzuge einen regulären Ausdruck.

Ihre Klassen sind eindeutig und funktionieren wirklich wie IDs, was nicht unbedingt der beabsichtigten Verwendung von Klassen entspricht. Strukturieren Sie Ihre HTML-ähnliche statt:

<div id="central_0" class="central">...</div> 
<div id="central_1" class="central">...</div> 
<div id="central_2" class="central">...</div> 

Nun wird die JavaScript wird einfacher:

var $divs = $('.central');        // jQuery 
var divs = document.querySelectorAll('.central');  // Newer browsers 
var divs = document.getElementsByClassName('central'); // Older browsers 

Answer 2

Es gibt keine Möglichkeit, die abgestimmte Elemente durch regex direkt zu bekommen, das einzige, was Sie tun können, ist zu bekommen alle Elemente durch etwas (wie: TagName, Name, etc ..) und filtern Sie dann die Elemente durch Regex.

Mit Ihrem HTML-Beispiel konnten Sie nur alle Elemente nach TagName abrufen und regex verwenden, um die className von Regex zu überprüfen.

Answer 3

Wie die anderen bereits erwähnt haben, können Sie einen Regex-Select nicht direkt über den Methodenaufruf getElementsByClassName unterstützen.

Aber ich werde auf diese anderen Probleme mit Ihrem Code hinweisen, da Sie neu in Javascript sind.

Verwenden von Klassen ist in Ordnung, aber Sie machen mehr Arbeit für sich selbst, indem Sie Ihre HTML so schreiben.

Anstelle die central_0....central_2, wenn sie im Grunde alle auf den gleichen CSS-Regeln arbeiten, sollten Sie sie schreiben wie diese central zero....central two dann central Klasse identische Regeln haben kann, während Sie Unterschiede zu den # Klassen zuordnen können. Auf diese Weise halten Sie sich auch an die DRY principle.

Auch sollten Sie wirklich in Betracht ziehen, die Best Practices für die Sprache beizubehalten. Wenn Sie Ihren Elementen mit diesen Klassen keine CSS-Regeln zuweisen, sollten Sie id's verwenden, und das erleichtert Ihnen das Leben.