Javascript本机等效于JQuery.each（）$（本）

我有下面的代码，它使用class

.comment

查看每个div，如果超过100个字符，则缩短文本。使用JQuery

问题是如何转换为本机javascript，我找不到

.each（）

或

$（this）

var showChar=100；
var ellipseText=“…”；
var moretext=“更多”；
var lesstext=“less”；
$（'.comment'）。每个（函数（）{
var content=$（this.html（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（showChar-1，content.length-showChar）；
var html=c+''+ellipseText+''+h+''；
$（this）.html（html）；
}
});

---

这可能吗？

您不会找到与

$（this）

等价的本机函数，因为是jQuery函数。如果

$

函数本机已经存在，那么就没有任何理由编写它

对于

。每个

部分，您可以使用如下任何数组：

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

或者使用简单的

for

循环：

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

更新：2019-12-02 现在，它更常用于查询元素，如果希望将

节点列表

转换为数组，则可以使用

函数boldComments（）{
const comments=document.querySelectorAll（'.comment'）；
comments.forEach（comment=>{
comment.innerHTML=''+comment.innerHTML+''；
})
}
document.querySelector（'button'）。addEventListener（'click'，boldComments）

评论A
评论B
评论C
评论D

粗体注释
新版本的Javascript（Ecmascript 6）中包含了forEach（）。当前版本Ecmascript 5将forEach转换为数组。因此，您可以将forEach使用到数组中，或者继续使用已经解决的jQuery。
实际上
此
引用当前上下文。如果不使用事件侦听器，则它是窗口对象。如果在oo Javascript
中使用，则该
是对象的上下文。因此，
$（this）
是您当前正在侦听事件的元素。
是事件触发的元素的当前上下文。在您的情况下，它是jQuery调用的对象。

在普通JavaScript中实现jQuery$。每个方法
实际上，您可以将jQuery作为一个整体来实现，但它需要了解核心JavaScript。对于.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;
} 

Object.prototype.each=函数（回调）{
if（typeof callback！=='function'）抛出新错误（'callback应该
是函数“）；
对于（i=0；i

现在看看这个
这个
指的是
对象的上下文。通过返回
this
可以允许方法链接。

每个
方法都为您提供了在DOM上遍历的简单方法。试试看。它在回调的第一个参数中给出当前父级的父级+子级。
参见EcmaScript 6示例：

document.querySelectorAll('.comments').forEach(function (comment) {
     var content = comment.innerHTML

        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>';

            comment.innerHTML=html;
        }
});

document.querySelectorAll（'.comments'）.forEach（函数（comment）{
var content=comment.innerHTML
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（showChar-1，content.length-showChar）；
var html=c+''+ellipseText+''+h+''；
comment.innerHTML=html；
}
});
.each（）
：
用于循环
$（this）
：
this
。由于jQuery是用javascript编写的，您可以查看它们是如何完成的，作为关于任何其他jQuery与原生JS问题的说明。至于实际获取要执行for循环的元素，您可以使用
document.GetElementsByCassName（'comment'）
我同意@AstroCB的观点，for循环基本上等同于.each（），但是，由于$（this）返回jQuery对象，因此实际上没有非jQuery等价物。根据定义，它是特定于jQuery的。请注意：
$（'.comments'）
应该是
document.getElementsByClassName（“comment”）
，因为这里使用的是纯JS。@AstroCB，我无法获得
document.getElementsByClassName
来处理JSFIDLE。对你有用吗？顺便说一句，我使用的是Chrome浏览器。@Zack It-should:这是一个标准的JS函数。@AstroCB-True。编辑答案以解决此问题。
document.getElementsByClassName
有一个值得注意的问题。它返回的集合应该是活动的（即：它会随着文档的更改而更新）。如果循环从元素中删除
comment
类，将其添加到其他元素中，或者添加具有该类的元素，那么这可能会导致外观怪异的迭代问题。您可以在迭代之前将元素复制到数组中，或者改为使用
document.querySelectorAll（'.content'）
返回一个非活动列表来解决这个问题。
 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;
} 

document.querySelectorAll('.comments').forEach(function (comment) {
     var content = comment.innerHTML

        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>';

            comment.innerHTML=html;
        }
});