Javascript 本机相当于 JQuery .each() & $(this)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25247225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript native equivalent to JQuery .each() & $(this)
提问by Darren Sweeney
I have the following code which looks at each div with class .commentand shortens the text if more than 100 characters. Using JQuery.
我有以下代码，它使用类查看每个 div，.comment如果超过 100 个字符，则缩短文本。使用 JQuery。
Question is how to convert to native javascript, I can't find equivalents for .each()or $(this)
问题是如何转换为原生 javascript，我找不到.each()或$(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+ ' </span><span class="morecontent"><span>' + h + '</span></span>';
$(this).html(html);
}
});
Is this possible?
这可能吗？
回答by Mike Cluck
You're not going to find a native equivalent to $(this)because that isthe jQuery function. There wouldn't be any reason to write the $function if it already existed natively.
你不会找到一个原生的等价物，$(this)因为那是jQuery 函数。$如果函数本身已经存在，则没有任何理由编写该函数。
As for the .eachpart, you can work with any array like this:
至于.each零件，您可以使用任何数组，如下所示：
var $comments = $('.comment');
comments.forEach(function(comment) { ... });
or using a simple forloop:
或使用一个简单的for循环：
for (var i = 0, len = $comments.length; i < len; i++) {
var comment = $comments[i];
}
If you want to remove jQuery entirely, you'll need to get your elements using document.getElementsByClassName. This will return an HTMLCollectionwhich does not have the forEachfunction so you'll need to use a forloop like above.
如果要完全删除 jQuery，则需要使用document.getElementsByClassName. 这将返回一个HTMLCollection没有该forEach功能的，因此您需要使用上述for循环。
Also note that you won't have access to the .htmlfunction. Instead, you can access and modify it with the .innerHTMLproperty of each node.
另请注意，您将无法访问该.html功能。相反，您可以使用.innerHTML每个节点的属性访问和修改它。
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;
}
Update: 2019-12-02
更新：2019-12-02
Nowadays it is more common to use document.querySelectorAllfor querying elements and you can use Array.fromif you would like to convert the NodeListto an array.
如今，它更常用document.querySelectorAll于查询元素，Array.from如果您想将其转换NodeList为数组，则可以使用。
function boldComments() {
const comments = document.querySelectorAll('.comment');
comments.forEach(comment => {
comment.innerHTML = '<b>' + comment.innerHTML + '</b>';
})
}
document.querySelector('button').addEventListener('click', boldComments);<ul>
<li class="comment">Comment A</li>
<li class="comment">Comment B</li>
<li class="comment">Comment C</li>
<li class="comment">Comment D</li>
</ul>
<button>Bold comments</button>回答by realmag777
See EcmaScript 6 example:
参见 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+ ' </span><span class="morecontent"><span>' + h + '</span></span>';
comment.innerHTML=html;
}
});
回答by Saqlain Ishtiaq
Actually thisrefers to the current context. It is the window object if used without event listener. If used in oo Javascript thisis the object's context. So $(this)is is the element you are currently listening an event on.
It is the current context of the element on which event triggers.In your case it is an object upon which jQuery.each method is invoked.
实际上this是指当前的上下文。如果在没有事件侦听器的情况下使用，它就是窗口对象。如果在 oo 中使用 Javascriptthis是对象的上下文。$(this)您当前正在侦听事件的元素也是如此。
它是触发事件的元素的当前上下文。在您的情况下，它是调用 jQuery.each 方法的对象。
Implementing jQuery $.each method in Vanilla JavaScript
在 Vanilla JavaScript 中实现 jQuery $.each 方法
You can actually implement jQuery as a whole but it requires knowledge of Core JavaScript. In the case of .each method we are going to prototype Object class.
The simplest eachmethod is:
您实际上可以将 jQuery 实现为一个整体，但它需要 Core JavaScript 的知识。在 .each 方法的情况下，我们将创建 Object 类的原型。最简单的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 thisrefers to the context of Object. By returning thisyou can allow method chaining.
This eachmethod gives you the easy way to traverse on DOM. Give it a try. It gives parent + childs of the current parent in callback's first argument.
看看这个现在this指的上下文Object。通过返回，this您可以允许方法链接。
此each方法为您提供了一种在 DOM 上遍历的简单方法。试一试。它在回调的第一个参数中给出当前父级的父级 + 子级。
回答by Rod
The new version of Javascript (Ecmascript 6) have forEach() included. The current version, Ecmascript 5 has the forEach into arrays. So you can use the forEach into arrays or keep using the jQuery that has it already solved.
新版本的 Javascript (Ecmascript 6) 包含 forEach()。当前版本，Ecmascript 5 将 forEach 放入数组。因此，您可以将 forEach 用于数组或继续使用已经解决的 jQuery。
