Reputation: 1049
i have a problem when creating callback
on my own EACH
function.
i'm using OOP way to accompolished it.
basically, i create my own javascript library that mimicry JQUERY
habits.
check this fiddle out on action : https://jsfiddle.net/6pk068ep/1/
<div class="parent">
<p class="child">child</p>
</div>
<div class="parent">
<p class="child">child</p>
</div>
The JavaScript:
"use strict";
(function(window) {
var i, $, $Obj, ele; // global variable
$ = function(el, length) {
return new $Obj(el, length); // create new object
};
$Obj = function(el, length) {
ele = document.querySelectorAll(el); // get selector element
this.length = ele.length; // count the length of ele
for (i = 0; i < this.length; i++) {
this[i] = ele[i]; // loop it
}
};
$Obj.prototype = { // object prototype
each : function(fn) { // create method each just like jquery
var arr = []; // create array to store value
for (i = 0; i < this.length; i++) {
arr.push(this[i]); // push it to arr variable
}
fn.apply(this, arr); // IS THIS THE CORRECT WAY TO APPLY IT?
return this; // return this, so, it's chainable for other method
}
};
window.$ = $; // make dollar sign global object
})(window);
$(".child").each(function() {
console.log(this);
this.style.color = "red"; // not working, what's wrong with my code? is it because my "apply" wrong?
});
how to get those .child
style color to red?
what's wrong with my code?
thanks in advance...
Upvotes: 4
Views: 66
Reputation: 388446
When you say each()
it is assumed that the callback will be called for each item in the collection, so in this case you need to call the callback in the for loop.
Also note that variables like ele
and i
are not global, they are suppose to be local to the function where you are using them.
"use strict";
(function(window) {
var $, $Obj; // global variable
$ = function(el, length) {
return new $Obj(el, length); // create new object
};
$Obj = function(el, length) {
var ele, i;
ele = document.querySelectorAll(el); // get selector element
this.length = ele.length; // count the length of ele
for (i = 0; i < this.length; i++) {
this[i] = ele[i]; // loop it
}
};
$Obj.prototype = { // object prototype
each: function(fn) { // create method each just like jquery
var i;
for (i = 0; i < this.length; i++) {
fn.call(this[i], this[i], i);
}
return this; // return this, so, it's chainable for other method
}
};
window.$ = $; // make dollar sign global object
})(window);
$(".child").each(function() {
console.log(this);
this.style.color = "red"; // not working, what's wrong with my code? is it because my "apply" wrong?
});
<div class="parent">
<p class="child">child</p>
</div>
<div class="parent">
<p class="child">child</p>
</div>
Upvotes: 3