Last active
January 2, 2016 10:58
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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