Clever Geek Handbook

Native Javascript equivalent for JQuery.each () & $ (this)

I have the following code that looks at each div with a class .comment

and truncates the text if more than 100 characters. Using jQuery.

The question is how to convert to native javascript, I cannot find equivalents for .each()

or$(this) 

var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.comment').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar-1, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span></span>';

        $(this).html(html);
    }

});

Is it possible?

+3


source to share


3 answers


You won't find a native equivalent $(this)

because is a jQuery function. There would be no reason to write a function $

if it already exists natively.

As for the part .each

, you can work with any array like this:

var $comments = $('.comment');
comments.forEach(function(comment) { ... });

or using a simple loop for

:



for (var i = 0, len = $comments.length; i < len; i++) {
    var comment = $comments[i];
}

If you want to remove jQuery entirely, you will need to get your elements using document.getElementsByClassName

. This will return HTMLCollection

which has no function forEach

, so you need to use a loop for

like above.

Also note that you will not have access to the function .html

. Instead, you can access and modify it using a property .innerHTML

for each node.

var comments = document.getElementsByClassName('comment');
for (var i = 0, len = comments.length; i < len; i++) {
    var comment = comments[i];
    var content = comment.innerHTML;
    ...
    comment.innerHTML = html;
}
+12


source


The new version of Javascript (Ecmascript 6) includes forEach (). Current version, Ecmascript 5 has forEach in arrays. So you can use forEach on arrays, or keep using jQuery, which has already allowed.



0


source


Actually this

refers to the current context. It is a window object if used without an event listener. If used in oo Javascript this

is an object context. Thus, $(this)

this is the element in which you are currently listening for the event.
This is the current element context on which the event is fired. In your case, this is the object on which jQuery. each method is called.

JQuery $ .each implementation in Vanilla JavaScript

You can actually implement jQuery in general, but it requires knowledge of basic JavaScript. In the case of the .each method, we're going to prototype the Object class. The easiest method each

:

 Object.prototype.each = function(callback){
       if(typeof callback !== 'function') throw new Error('Callback should 
                    be a function');
       for(i = 0; i < this.length; i++){
        callback(this[i]);
    }
    return this;
}

Look at this now is this

referenced in context Object

. By returning this

, you can resolve the method chaining.
This method each

allows you to easily navigate the DOM. Try it. It gives the parent + children of the current parent in the first argument of the callback.

0


source






More articles:


All Articles