Komisches Verhalten

[Arcsinh]

Guten Abend,

ich will ein Framework schreiben, dass die wichtigsten Funktionen beinhaltet. Das ist die vereinfachte Version:

// Die Funktion wurde vereinfacht, sie dient jetzt nur noch als Alternative für
// document.getElementById
function getElement(elem) {
    // Wenn elem = "#id"
    if((/^#\w+/g).exec(elem)) {
        return document.getElementById(elem.replace(/#/, ""));
    }
}

function _DOM(elems) {
    this.elements = [];
    for(var i=0; i<elems.length; i++) {
        var element = getElement(elems[i]);
        this.elements.push(element);
    }
    return this;
}
_DOM.prototype = {
    each : function(func) {
        for(var i=0; i<this.elements.length; i++) {
            func.call(this, this.elements[i]);
        }
        return this;
    },
    setStyle : function(prop, val) {
        this.each(function(elem) {
            elem.style[prop] = val;
        });
        return this;
    }
};

window.DOM = function() {
    return new _DOM(arguments);
};

Damit möchte ich nun mehrere divs eine rote Hintergrundfarbe geben. So sieht mein HTML-Bereich aus:

<style>
    #eins, #zwei, #drei, #vier, #fuenf {
        width: 100px; height: 100px;
        float: left;
        margin-right: 10px;
    }
</style>
<div id="eins"></div>
<div id="zwei"></div>
<div id="drei"></div>
<div id="vier"></div>
<div id="fuenf"></div>

So schaut meine Anweisung aus:

DOM("#eins", "#zwei", "#drei", "#vier", "#fuenf").setStyle("backgroundColor", "red");

Jedoch wirkt sich das nur auf meinem ersten div aus. Nach einigem ausprobieren hab ich festgestellt, dass der Fehler womöglich an der Funktion getElement liegt.

Nachdem ich die Funktion um die dickgedruckte Zeile erweitert habe

function getElement(elem) {
    // Wenn elem = "#id"
    if((/^#\w+/g).exec(elem)) {
        console.log(document.getElementById(elem.replace(/#/, "")));
        return document.getElementById(elem.replace(/#/, ""));
    }
}

hat das Chromium-Entwicklertool folgendes ausgegeben:



Keine Ahnung, wieso nur jedes zweite Element dort "wahrgenommen" wird.
Bin dankbar, wenn mir jemand helfen kann!

[kkapsner]

Mich wundert's, dass überhaupt ein anderes Element als das erste angezeigt wird: dein _DOM erwartet als Parameter einen Array und nicht mehrere Parameter...

[Arcsinh]

Durch

window.DOM = function() {
    return new _DOM(arguments);
};

werden alle Argumente übergeben, soweit ich das weiß.

[ein schlauer]

Das komische Verhalten kommt von der exec Funktion wegen dem g-Switch. JS speichert diese Ausdrücke zwischen - ich weiß nicht genau was warum da passiert, aber die Lösung wäre:

function getElement(elem) {
    // Wenn elem = "#id"
    if(/^#\w/.test(elem)) {
        return document.getElementById(elem.replace(/#/, ""));
    }
}

[ein schlauer]

Ich glaub dieser Blogeintrag beschreibt das Problem: http://blog.thatscaptaintoyou.com/st...al-regex-flag/

Edit: und noch was - das könnte für dich interessant sein: http://www.dustindiaz.com/roll-out-your-own-interface/

EDIT 2: Ich sehe,du kennst den Eintrag schon

[Arcsinh]

Vielen, vielen Dank...es klappt endlich!
Oh man, wäre fast verzweifelt daran

Zu EDIT 2: Ja, hab mich dadurch inspirieren lassen