Skip to content

Instantly share code, notes, and snippets.

@paul-bjorkstrand
Last active January 2, 2016 10:58
Show Gist options
  • Save paul-bjorkstrand/8293183 to your computer and use it in GitHub Desktop.
Save paul-bjorkstrand/8293183 to your computer and use it in GitHub Desktop.
This function allows a developer to set attributes on an HTML element using selector-esque syntax, and return a selector-syntax of the current jQuery object. This is by no means production ready/complete. Hopefully someone finds this as useful as I do.
/*
Copyright 2014 Paul Bjorkstrand
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/*
* Syntax:
* var a = $("<div/>").selectors("#id.class1.class2[attr1=val1]"); // div with id "id", classes "class1" & "class2", and attribute "attr1" with value "val1"
* a.selectors() // prints div#id.class1.class2[attr1=val1]
*/
(function($, console) {
"use strict";
var REGEX = /(^#|\$|\.|:)[^.[{:$]+|(\[|\{)[^\]}]+(\]|\})/g;
$.fn.selectors = $.fn.$ = function(arg) {
if (typeof arg === "string") {
return set(this, arg);
} if (typeof arg === "boolean" || $.isArray(arg)) {
return get(this, arg)
} else {
return get(this);
}
};
function set(obj, selectorString) {
var match, matchStr, index, name, val;
selectorString = selectorString.trim();
if (/\s/.test(selectorString)) {
throw "jQuery selectors plugin: The selector string must not contain any whitespace";
}
while ((match = REGEX.exec(selectorString)) && (matchStr = match[0])) {
switch(matchStr[0]) {
case "#":
if (matchStr[1] !== "!") {
obj.attr("id", matchStr.slice(1));
} else {
obj.removeAttr("id");
}
break;
case ".":
if (matchStr[1] !== "!") {
obj.addClass(matchStr.slice(1));
} else {
obj.removeClass(matchStr.slice(2));
}
break;
case "[":
if (matchStr[matchStr.length-1] === "]") {
if (matchStr[1] !== "!") {
index = matchStr.indexOf("=");
if (index !== -1) {
name = matchStr.slice(1,index);
val = matchStr.slice(index + 1, -1);
obj.attr(name, val);
} else {
name = matchStr.slice(1,-1);
obj.attr(name,"");
}
} else {
name = matchStr.slice(2,-1);
obj.removeAttr(name);
}
} else {
console.error("Missing end bracket in " + matchStr);
}
break;
case "{":
// future set properties
console.warn("{a=b} expressions not implemented");
continue;
index = matchStr.indexOf("=");
if (matchStr[matchStr.length-1] === "}") {
if (index !== -1) {
name = matchStr.slice(1,index);
val = matchStr.slice(index + 1, -1);
} else {
console.error("Property setting requires a name and value. Example: {disabled=b@true}")
}
} else {
console.error("Missing end brace in " + matchStr);
}
break;
case ":":
// future: special selectors using : and :!
console.warn(": expressions not implemented");
case "$":
// future: call a jquery object function with the given parameters (i.e. .val(newVal))
console.warn("$ expressions not implemented");
default:
// how did we get here
console.warn("Selector not found: " + matchStr);
}
}
return obj;
}
function get(obj, includeAttributes) {
return obj.map(function(index, element) {
var id = $(element).attr("id"),
classes = $(element).attr("class"),
attributes = [];
if (id) {
id = "#" + id;
} else {
id = "";
}
if (classes) {
classes = "." + classes.split(/\s+/).join(".");
} else {
classes = "";
}
if (includeAttributes !== false) {
$.each(element.attributes, function(key, attr) {
if (!$.isArray(includeAttributes) || $.inArray(key, includeAttributes)) {
if (attr.name !== "class" && attr.name !== "id") {
if (attr.value) {
attributes.push("["+attr.name+"="+attr.value+"]");
} else {
attributes.push("["+attr.name+"]");
}
}
}
});
}
attributes = attributes.join("");
return element.tagName.toLowerCase() + id + classes + attributes;
});
}
})(jQuery, window.console);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment