jQuery um eigene Selektoren erweitern

jQuery bietet von Haus aus ja schon eine Vielzahl an komfortablen Selektoren und deckt viele, wenn nicht sogar "die meisten", Probleme ab - in allen anderen Fällen kann man sich leicht mit dem each()-Operator aushelfen. Falls in einem Projekt regelmäßig der gleiche Operator fehlt, ist es aber auch ein leichtes, sich einen eigenen Operator zu definieren. Dazu genügt es, $.exp[':'] geeignet zu erweitern:

Das folgende Beispiel implementiert einen einfachen Selektor zum Test auf das Vorhanden-Sein eines Name-Tags:

$.extend($.expr[':'], {  
    hasNameTag: function(a) {  
        return $(a).attr("name") != undefined;  
    }  
});  
      
$('div:hasNameTag').click(function() {  
    alert('The element you clicked has got a name tag');  
});  

Der Code und die Benutzung dürfte recht selbsterklärend sein. Hier kann man das ganze auch nochmal testen:

Source: 6-demo1.html

Interessanter - und damit auch gleichzeitig komplexer - wird es, wenn man den gewünschten Selektor parametrisieren möchte:

Angenommen, es interessiert nicht nur, ob ein Name-Tag gesetzt wurde, sondern auch der Wert selber ist von Interesse:

 Wert 1 
 Wert 2 
 Wert 3 

"Selektiere alle divs, deren name-Tag auf "b" lautet!"

Auch dies ist kein Problem und lässt sich leicht über einen eigenen Selektor implementieren. Lediglich die Signatur des Selektors muss dazu erweitert werden:

// :selectByTagMatch('string')
selectByTagMatch : function(objNode, intStackIndex, arrProperties, arrNodeStack)
{
    // get function arguments
    var arrArguments = eval("(['" + arrProperties[ 3 ] + "'])");

    // create a jQuery version of this node.
    var $obj = $( objNode );

    // check for matches
    for (var i = 0 ; i < arrArguments.length ; i++){
        // Check for tag equality.
        if ($obj.attr( "name" ) != undefined && $obj.attr( "name" ) == arrArguments[ i ]){
            // We found a tag match, return true to
            // indicate that this node should be included
            // in the returned jQuery stack.
            return( true );
        }
    }
    return false;
}

Auch hier gibt es eine kleine Demo:
Source: 6-demo2.html

Abschließend noch eine kleine Anmerkung zu Zeile 5:

    var arrArguments = eval("(['" + arrProperties[ 3 ] + "'])");

Je nach Parameter Typ (String vs. int) dürfen die ' nicht vergessen werden.