We Keep Coding

Javascript: Chaining on elements like jQuery

I'm trying to replicate jQuery's element manipulation to a certain extent. Now what I have found to be very useful is the .first() selector. I would like to be able to chain functions like this;
getElement(selector).first().hasClass(className);
Now, there are 2 issues with how far I've gotten (Do note that my code example is minimised, so please, no comments about error-handling.)
var getElement = function(selector, parent) {
ret = document.querySelectorAll(selector);
this.element = ret;
this.hasClass = function(className) {
className.replace('.', '');
if(this.multiple())
{
console.log('Cannot use hasClass function on multiple elements');
return false;
}
};
this.first = function() {
this.element = this.element[0];
return this;
};
return this;
};
My current problem
If I call my function;
var $test = getElement('.something');
//result: nodelist with .something divs
If I call for the first element within the result;
$test.first();
//Result: First div, perfect!
However, now if I call $test again, it will replace the elements property with the result of first(), meaning I have "lost" my old values. I don't want to lose them, I only want the first() functions for that specific functionality. Then I want $test to return all elements again.
Also, recalling first() will now end up undefined, since there is only 1 element left within this as it has deleted the old elements from within the object.
Another attempt
Now, I've also tried to turn it around a bit by returning the first-child instead of the entire class object;
this.first = function() {
return this.element[0];
};
However, I will
$test.first().hasClass(className);
//Returns ERROR, method hasClass undefined
this is because .hasClass exists on the original this, which doesn't get returned anymore since I'm now returning the element.
I have tried to get something out of jQuery's library, though that just confused me more...
I have googled this subject, but with all the 'chaining methods' solutions I'm finding, all of them seem to be overwriting the original values of the object, which is not what I want to happen. One other solution actually required me to re-initiate the object over and over again, which did not seem very efficient to me... Any help is appreciated. I'm assuming I'm going about this completely the wrong way.
-- If you can help me, please do explain why your solution works. I really feel like if I understand this, my understanding of javascript can expand a lot further. I just need to get past this structural(?) issue.

A method like first() should not modify this, it should create a new object and return that. You only use return this; in methods that modify an element rather than returning information derived from the element.
this.first = function() {
return new getElement(this.element[0]);
};
And note that you have to use new getElement to create an object, not just getElement.
This also requires a change to the constructor, so it can accept either a selector string or an element:
var getElement = function(selector, parent) {
var ret = typeof selector == "string" ? document.querySelectorAll(selector) : [selector];
...
}
You should also consider doing this in proper OO fashion, by putting the methods in a prototype, rather than defining them in every object.
var getElement = function(selector, parent) {
var ret = typeof selector == "string" ? document.querySelectorAll(selector) : [selector];
this.element = ret;
};
getElement.prototype.hasClass = function(className) {
className.replace('.', '');
if (this.multiple()) {
console.log('Cannot use hasClass function on multiple elements');
return false;
}
};
getElement.prototype.first = function() {
return new getElement(this.element[0])
};

this in your outer function refers to the window / global object.
Instead, return the ret variable itself.
In the inner functions (which become the object's methods), this acts the way you expect it to.
Here's an alternative solution, which allows chaining, even after you've called the first method:
var getElement = function(selector, parent) {
var ret = typeof selector == 'string' ? document.querySelectorAll(selector)
: selector;
ret.hasClass = function(className) {
if(!this.classList) {
console.log('Cannot use hasClass function on multiple elements');
return false;
} else {
return this.classList.contains(className);
}
};
ret.first = function() {
return new getElement(this[0]);
};
return ret;
};
console.log(getElement('p').length); //2
console.log(getElement('p').first().innerHTML); //abc
console.log(getElement('p').first().hasClass('test')); //true
console.log(getElement('p').first().hasClass('nope')); //fase
console.log(getElement('p').hasClass('test')); //false (multiple elements)
<p class="test">
abc
</p>
<p>
def
</p>

Here is how I would approach this:
Create a constructor, say Search, tasked to find the elements based on the input. Using a constructor is proper OO Programming and you also have the advantage of defining methods once in the prototype and they can be accessed by all instances.
Ensure that the context (this) is an array-like object, with numeric properties and a length, so that you can easily iterate over every matched element in the traditional way (using for loops, [].forEach etc).
Create a function, say getElement, that will use the constructor and return the result without having to use the new keyword all the time. Since the function returns an instance of our constructor, you can chain the methods you want as you would normally do.
The method first uses the constructor to create a new instance instead of modifying the original, since its role is to return the first element, not delete everything but the first element.
Each time you come up with a new method you want your object to have, you can simply add it to the prototype of the constructor.
Snippet:
;(function () {
function Search (value) {
var elements = [];
/* Check whether the value is a string or an HTML element. */
if (typeof value == "string") {
/* Save the selector to the context and use it to get the elements. */
this.selector = value;
elements = document.querySelectorAll(value);
}
else if (value instanceof Element) elements.push(value);
/* Give a length to the context. */
this.length = elements.length;
/* Iterate over every element and inject it to the context. */
for (var i = 0, l = this.length; i < l; i++) this[i] = elements[i];
}
/* The method that returns the first element in a Search instance. */
Object.defineProperty(Search.prototype, "first", {
value: function () {
return new Search(this[0]);
}
});
/* The global function that uses the Search constructor to fetch the elements. */
window.getElement = (value) => new Search(value);
/* Create a reference to the prototype of the constructor for easy access. */
window.getElement.fn = Search.prototype;
})();
/* Get all elements matching the class, the first one, and the first's plain form. */
console.log(getElement(".cls1"));
console.log(getElement(".cls1").first());
console.log(getElement(".cls1").first()[0]);
/* ----- CSS ----- */
.as-console-wrapper {
max-height: 100%!important;
}
<!----- HTML ----->
<div id = "a1" class = "cls1"></div>
<div id = "a2" class = "cls1"></div>
<div id = "a3" class = "cls1"></div>
Example:
In this example, I'm adding a new method called hasClass to the prototype of the constructor.
/* The method that returns whether the first element has a given class. */
Object.defineProperty(getElement.fn, "hasClass", {
value: function (value) {
return this[0].classList.contains(value);
}
});
/* Check whether the first element has the 'cls2' class. */
console.log(getElement(".cls1").first().hasClass("cls2"));
<!----- HTML ----->
<script src="//pastebin.com/raw/e0TM5aYC"></script>
<div id = "a1" class = "cls1 cls2"></div>
<div id = "a2" class = "cls1"></div>
<div id = "a3" class = "cls1"></div>

I think the easiest would be to return a new class that contains the nodes you have selected. That would be the easiest solution, as you don't really want to mutate any of your previous selectors.
I made a small example, using some ES6 that makes a few things easier to work with, which also has a $ to initiate the selections being made.
You would notice that first of all, any selection that is made, is just calling the native document.querySelectorAll but returns a new Node class. Both first and last methods also return those elements.
Lastly, hasClass should work on all elements in the current nodes selections, so it will iterate the current node, and check all classes in there, this one returns a simple bool, so you cannot continue with the method chaining there.
Any method you wish to chain, should either:
return this object (the current node)
return an element of the this object as a new node so any further manipulations can be done there
const $ = (function(global) {
class Node extends Array {
constructor( ...nodes ) {
super();
nodes.forEach( (node, key) => {
this[key] = node;
});
this.length = nodes.length;
}
first() {
return new Node( this[0] );
}
last() {
return new Node( this[this.length-1] );
}
hasClass( ...classes ) {
const set = classes.reduce( (current, cls) => {
current[cls] = true;
return current;
}, {} );
for (let el of this) {
for (let cls of el.classList) {
if (set[cls]) {
return true;
}
}
}
return false;
}
}
global.$ = function( selector ) {
return new Node( ...document.querySelectorAll( selector ) );
};
return global.$;
}(window));
let selector = $('.foo');
let first = selector.first(); // expect 1
console.log(first[0].innerHTML);
let last = selector.last();
console.log(last[0].innerHTML); // expect 4
console.log( first.hasClass('foo') ); // expect true
console.log( first.hasClass('bar') ); // expect false
console.log( selector.hasClass('foo') ); // expect true
console.log( selector.hasClass('bar') ); // expect true
<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo bar">3</div>
<div class="foo">4</div>

You can update getElement so it returns back again when you send it an element.
var getElement = function(selector, parent) {
var ret = null
if (typeof selector === "string") {
ret = document.querySelectorAll(selector);
} else {
ret = selector
}
this.element = ret;
this.hasClass = function(className) {
className.replace('.', '');
if (this.multiple()) {
console.log('Cannot use hasClass function on multiple elements');
return false;
}
};
this.first = function() {
this.element = getElement(this.element[0]);
return this;
};
return this;
};
var test = getElement(".foo");
console.log(test.first())
console.log(test.first().hasClass)
<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>
<div class="foo">4</div>

You can use .querySelectorAll(), spread element and Array.prototype.find(), which returns the first match within an array or undefined
const getElement = (selector = "", {prop = "", value = "", first = false} = {}) => {
const el = [...document.querySelectorAll(selector)];
if (first) return el.find(({[prop]:match}) => match && match === value)
else return el;
};
let first = getElement("span", {prop: "className", value: "abc", first: true});
console.log(first);
let last = getElement("span");
console.log(all);
<span class="abc">123</span>
<span class="abc">456</span>

How to return different values

How Jquery can chain and return multiple values?
I know you can chain:
const $ = {
a() {
return this;
}
b() {
return this;
}
}
$.a().b()
The example below will speaks by itself:
$('div').find('p').hide().css() // find an apply style
$('div').find('p') // return all the "p"
See my example
How jQuery return all the p and keep the plugin instance?
How can I achieve the same behavior?
How to know if there is another call after find()?
Thanks.

All of these API members are returning a jQuery object. It just so happens that the jQuery API has all of these members on it. That is how you are able to chain calls on the same object.
Taking a look at the docs:
In API calls that return jQuery, the value returned will be the original jQuery object unless otherwise documented by that AP
show() returns a jQuery type
hide() returns a jQuery type
find() returns a jQuery type
Note that css() doesn't return a jQuery type, so you can't chain off that.

jQuery follows an approach like this one:
function $(param) {
if(!(this instanceof $)) // if $ is called without using 'new'
return new $(param); // then return a new instance
this.param = param; // ...
}
$.prototype.a = function() { // the function a has to...
// a's logic
console.log("this is a");
return this; // return this so there will be chaining
}
$.prototype.b = function() { // the same goes for b
// b's logic
console.log("this is b");
return this;
}
$.c = function() {
// c's logic
console.log(c);
// not returning this as c can't be chained
}
$("some param").a().b().a();
In the example, a and b are methods (attached to the prototype) that return this so they can be chained (example of $(...).val(), $(...).addClass()). c however is attached as a property to the function object $ directly, thus it can't be chained (example of $.isArray() and $.each() not to be confused with $(...).each()).
A mini-jQuery example:
function $(selector) {
if(!(this instanceof $))
return new $(selector);
if(selector instanceof $) // if selector is already an instance of $ then just return it to be used as it is
return selector;
else if(typeof selector === "string") // otherwise, if selector is a string, then select the elements
this.elems = document.querySelectorAll(selector);
else if($.isArray(selector)) // otherwise, if the selector is an array, then the elements will be those in the array ( this is used by find )
this.elems = selector;
else if(!selector) // otherwise, selector is a DOM element
this.elems = [selector];
}
$.prototype.each = function(callback) { // take a function (callback) and call it on all elements
for(var i = 0; i < this.elems.length; i++) // for each element in this.elems
callback.call(this.elems[i], i, this.elems[i]); // call callback, setting its this to the current element and passing to it two parameters: the index and the element itself
return this;
}
$.prototype.css = function(prop, value) { // a function that take a CSS property and probably a value and either set or return the value of that CSS property
if(value === undefined) // if the value is not provided, then
return this.elems[0].style[prop]; // return the value of the first element in the selection (some checking if the element exist should be here)
return this.each(function() { // if a value is provided, then
this.style[prop] = value; // set the style of each element in the selection, and then return this (this.each returns this so just return this.each())
});
}
$.prototype.text = function(val) { // follows the same as css above
if(val === undefined)
return this.elems[0].textContent;
return this.each(function() {
this.textContent = val;
});
}
$.isArray = function(obj) { // is not a method (this is not the instance of the class)
return Object.prototype.toString.call(obj) === "[object Array]";
}
// FIND:
$.prototype.find = function(selector) {
var newElems = []; // the array of new elements
this.each(function() { // for each element in the current selection
var thisElems = this.querySelectorAll(selector); // select it descendants that match the selector
for(var i = 0; i < thisElems.length; i++) // add them to the result array
newElems.push(thisElems[i]);
});
// remove duplicates // this is important as elements could be selected twice (elements inside a parent inside a grand parent where both parent and grand parent are in the old selection), check jQuery's source code for how they remove duplicats using sort
return $(newElems); // return a new $ object using the new array of elements as the wrapped elements (check the constructor for more informations)
}
// usage:
$("div").css("background", "#fd8") // selects all divs and change their background
.find("span") // now find all spans inside those divs
.css("background", "#0ff"); // change their background
<div>a</div>
<div class="even"><span>b</span></div>
<div>c</div>
<div class="even">d</div>
<div><span>e</span></div>
<span>outer span</span>

Confused about Object.defineProperties function

So, I have an element prototype function called hasClass.
Element.prototype.hasClass = function (className)
{
if (className && typeof className === "string")
{
if (this.classList)
{
return this.classList.contains(className);
}
else
{
return new RegExp(className).test("" + this.className + "");
}
}
};
Now, since I have to define multiple functions and the code will become pretty messy then I thought, why not use Object.defineProperties function; same function with the function:
Object.defineProperties(Element.prototype, {
"hasClass": {
get: function (className)
{
if (className && typeof className === "string")
{
if (this.classList)
{
return this.classList.contains(className);
}
else
{
return new RegExp(className).test("" + this.className + "");
}
}
}
}
});
The first function works fine as it should.
However, when defining same function with Object.defineProperties my Firefox console starts spamming: TypeError: $test.hasClass is not a function (Where $test is element choosen with selector). This error does not appear when using normal, first example of function, while it appears when using the lattest one.
So the question is. Why it does throw such error while it should not?
Oh yeah, funny thing is that when I use the second function with console.log like this:
Object.defineProperties(Element.prototype, {
"hasClass": {
get: function (className)
{
/*if (className && typeof className === "string")
{
if (this.classList)
{
return this.classList.contains(className);
}
else
{
return new RegExp(className).test("" + this.className + "");
}
}*/
console.log( "HI");
}
}
});
Then the console says this:
http://i.imgur.com/ULf7Ev6.png
I am confused.

You're mis-using the property get you should be using value otherwise hasClass will be the value returned from the get function.
Replace get with value
Object.defineProperties(Element.prototype, {
"hasClass": {
value: function (className)
{
/*if (className && typeof className === "string")
{
if (this.classList)
{
return this.classList.contains(className);
}
else
{
return new RegExp(className).test("" + this.className + "");
}
}*/
console.log( "HI");
}
}
});
Refer to documentation on defineProperty even though you're using defineProperties
The problem: in your version the value of hasClass will be undefined because you haven't returned anything from the get function the last statement is console.log( "HI"); if you put return {}; after that, hasClass === {}

Object.defineProperty and Object.defineProperties are not meant to define getter functions with params. In your case, just do it as in your first example (or look below, see Edit).
You can understand Object.defineProperty as a way to "intercept" the plain set/get action, but in the code where you get or set the property you can see no difference to "public" properties.
obj.abc = 'value'; // <-- set function called
console.log(obj.abc); // <-- get function called
There are no braces () - the functions are called transparently.
In case you really have properties, be careful not to run into recursive calls when the property you want to hide is actually as well public. See JS defineProperty and prototype
Edit
As I understand your question, you're looking for a less verbose way to add functions to a prototype.
Many JavaScript libraries have a way to copy some properties from one object to another:
jQuery: jQuery.extend
Underscore/Lodash: _.extend
Leaflet: L.extend
sure there are many more (and maybe a modern version of ECMAScript already has such a utility method)
Here you have a very basic extend function, if you don't have one of those libraries at hand:
function extend1(dest, src) {
var i;
for (i in src) {
if (src.hasOwnProperty(i)) {
dest[i] = src[i];
}
}
return dest;
}
Now you could extend your prototypes like this:
extend1(Element.prototype, {
hasClass: function (className) {
/* the body */
},
methodFoo: function (arg1, arg2) {},
methodBar: function () {},
});
I think, for methods this is a better way than using Object.defineProperty. For real property definitions, take Object.defineProperty.

Pass anonymous function to jquery selector expr[:]

In jQuery, you can run a selector where every element is run through a function you define, like this (totally contrived example):
jQuery.expr[':'].AllOrNothing= function(a,i,m){
// a is the thing to match, m[3] is the input
if(m[3] === "true"){
return true;
} else {
return false;
}
};
Then you can use it like:
$("div:AllOrNothing(" + true + ")"); //returns all divs
$("div:AllOrNothing(" + false + ")"); //returns nothing
Is it possible to pass an anonymous function instead of calling jQuery.expr[:].Name= ?
Edit
I'm envisioning something chainable like the following:
$("div").filterByFunction(function(a,i,m){ ... })

It sounds like you just want to use the built-in .filter() method and pass it a custom function that examines sibling elements to decide whether to return true or false and then hide the remaining elements.
$("section").filter(function() {
// examine child div and return true or false
}).hide();

For completeness, you could an implementation of filter yourself with by adding to $.fn
$.fn.customFilter = function(f) {
var filtered = $();
this.each(function() {
if(f.call(this)) {
filtered = filtered.add(this)
}
});
return filtered;
}
$("div").filterByFunction(function(){ return $(this).text() != "test"; })
Not that you should, in this case.

Function chaining

I am struggling to understand how this JavaScript code work. I am learning JS, and not exposed to a dynamic, functional language before. So, I visualize function calls in bit procedural, hierarchical order. With d3.js, one can draw svg elements as explained here
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
Let’s change the last line:
.text(function(d) { return d; });
Check out what the new code does on this demo page.
Whoa! We used our data to populate the contents of each paragraph, all thanks to the magic of the data() method. You see, when chaining methods together, anytime after you call data(), you can create an anonymous function that accepts d as input. The magical data() method ensures that d is set to the corresponding value in your original data set, given the current element at hand.
This magic, mentioned above is what I fail to understand. "d" is not a global variable, as if I change to another (c) name, it still works. So, the data method may be setting the value for the anonymous fn.
But, typically(with my limited reading) chaining is possible because the current function returns an object, on which the next method can be invoked. In the above case, how data method knows whether a text ("New paragraph!") is passed by the user, otherwise pass the data to the anonymous fn. The doubt is, the text method is down the line and data() is already executed. How the data is passed to the anonymous function?
thanks.

Digging into d3.js internals shows the following result for text function:
d3_selectionPrototype.text = function(value) {
return arguments.length < 1
? this.node().textContent : this.each(typeof value === "function"
? function() { var v = value.apply(this, arguments); this.textContent = v == null ? "" : v; } : value == null
? function() { this.textContent = ""; }
: function() { this.textContent = value; });
};
In case the supplied argument is a function, the following code gets executed:
this.each(function() {
var v = value.apply(this, arguments); // executing function provided
this.textContent = v == null ? "" : v;
});
Function each is declared as:
d3_selectionPrototype.each = function(callback) {
for (var j = -1, m = this.length; ++j < m;) {
for (var group = this[j], i = -1, n = group.length; ++i < n;) {
var node = group[i];
if (node) callback.call(node, node.__data__, i, j); // this is the line you are interested in
}
}
return this;
};
so on each invocation it supplies an element from this. And, getting down to it, this is populated by data function invocation.

Well, I have never used d3 before, but this is what I understand.
d is the data object (I would call it data instead of d had set in the data() method.
So what does the text() method does? Will it will call the function and use it's output, something like this:
function text (callback) {
var theText;
if (typeof callback === "function") {
theText = callback(dataset);
} else {
theText = callback;
}
// does something more
}
So, if callback is a function call it, and use its return value as text.
Then, what I'm guessing, is that if the function is an array, it will call the text method for each element in the array.
Something like this...
function text(callback) {
var theText;
if (typeof callback === "function") {
theText = callback(dataset);
} else {
theText = callback;
}
if (theText instanceof Array) { // this is not the best way to check if an object is an array, I'll come back to this later. I'm sorry.
for (var i=0, len=theText.length; i<len; i++) {
text(theText[i]);
}
} else {
// do something else
}
// do something more
}
please take into account that this would be a really simple version of what really happens.
If it's not clear enough please let me know.