Kat*_*lds 5 javascript reduce template-literals
JS 新手。我能找到的所有标题与我的标题相似的问题都太复杂了，我无法理解。
简单地说，我试图遍历一个数组并在最后返回一个结果，该结果基本上将数组的所有值添加/连接在一起。
但是，我似乎无法让它工作，因为数组中的项目是 HTML 代码块，而不是简单的字符串或数字。这是一个简化版。
HTML：
<article class="wrapper"><p>Some text 1.</p></article>
<article>No class.</article>
<article class="wrapper"><p>Some text 2.</p></article>
<article>No class.</article>
<article class="wrapper"><p>Some text 3.</p></article>
我试图找出一种方法来结束这段代码的模板文字：
<article class="wrapper"><p>Some text 1.</p></article>
<article class="wrapper"><p>Some text 2.</p></article>
<article class="wrapper"><p>Some text 3.</p></article>
这样我就可以将整个内容作为另一个页面上另一个元素的 innerHTML 注入。
从这个JS开始：
articleArray = document.querySelectorAll('.wrapper').outerHTML;
console.log(articleArray)
// This will return an array with the full HTML of the 3 "wrapper" articles as each item
然后尝试创建一个循环，该循环将在第一个循环中获取第 1 项的完整 HTML，并将其设置为类似于累加器值的内容。然后在第二个循环中，它将获取第 2 项的完整 HTML 并将其直接连接到第 1 项，这将是新的累加器值。等等。
对于我在现实生活中应用它的内容，我有超过 3 个项目，否则我可以做一些类似 articleArray[0] + articleArray[1] + articleArray[2] 的事情。
我尝试了一百万次，但这里是最接近的尝试：
var articleArray = document.querySelectorAll('.wrapper').outerHTML;
for (i = 0; i < searchWrappers.length; i++) {
searchWrapper = articleArray[i];
console.log(searchWrapper);
}
// Console log brought back 3 objects, but I need to combine them
var articleArray = document.querySelectorAll('.wrapper').outerHTML;
var searchStr = ''
for (i = 0; i < articleArray.length; i++) {
itemHTML = articleArray[i];
fullString = searchStr += itemHTML;
console.log(fullString);
}
// This did concatenate the 3 items, but only as:
// [object HTMLElement][object HTMLElement][object HTMLElement]
// and not the actual HTML
const articleArray = document.querySelectorAll('.wrapper').outerHTML;
const sum = articleArray.reduce((accumulator, value) =>
$(accumulator).concat($(value)));
console.log(sum);
// This brought back a normal array of the 3 items again
任何帮助表示赞赏！
编辑：感谢您的所有回复！我现在将通过它们并在我的真实代码上测试您的解决方案，看看什么最有效。
这应该可以帮助您：
function contains(selector, text) {
var elements = document.querySelectorAll(selector);
return [].filter.call(elements, function (element) {
return RegExp(text).test(element.textContent);
});
}
var articleArray = contains(".wrapper", 'menu');
// var articleArray = contains(".wrapper", /menu/i); // for case-insensitive
let templateLiteral = ``;
articleArray.forEach(function (article) {
templateLiteral += article.outerHTML + '\n';
})
console.log(templateLiteral);article {
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<article class="wrapper"><p>Some text 1. menu</p></article>
<article>No class.</article>
<article class="wrapper"><p>Some text 2. menu</p></article>
<article>No class.</article>
<article class="wrapper"><p>Some text 3.</p></article>
</body>
</html>基本思想是循环遍历每个 HTML 元素并将outerHTML元素添加到模板文字中。
编辑：感谢这个答案，它帮助我达到了在 jQuery 中找到 vanilla js 替代品的预期效果:contains。
| 归档时间： |
|
| 查看次数： |
132 次 |
| 最近记录： |