使用array.join（）内爆classname数组javascript
[英]Use array.join() to implode classname array javascript
问题描述
I have some html tags and I am trying to join them using javascript array. 
我有一些html标记，我正在尝试使用javascript数组将其加入。
I have tried printing out the array to see what it looks like. 我尝试打印出阵列以查看其外观。 If it try printing out one array item, it works but the whole array doesn't show 如果它尝试打印出一个数组项，则可以，但是整个数组都不会显示
<p>Click the button to join the array elements into a string.</p> <button onclick="myFunction()">Try it</button> <p class="demo">Banana</p> <p class="demo">Orange</p> <p class="demo">Appl</p> <p id="demo"></p> <script> function myFunction() { var fruits = document.querySelectorAll(".demo")[]; var y = document.getElementById("demo"); y.innerHTML = fruits.join(','); } </script>
I expect it to join the classname array together and print out a result but it shows nothing. 我希望它可以将classname数组连接在一起并打印出结果，但是什么也没显示。 I am not so good at javascript and would appreciate the help. 我不太擅长javascript，不胜感激。
6 个解决方案
解决方案1
4 2019-08-19 20:29:47
I'm not sure what you're trying to do by adding [] to the end of your query selector code; 我不确定要在查询选择器代码的末尾添加[]来做什么。 that doesn't turn it into an array, if that's what you thought. 如果那是您的想法，那并不会将其变成数组。 document.querySelectorAll returns a collection of HTML elements, but not an actual array. document.querySelectorAll返回HTML元素的集合，但不返回实际的数组。 To convert it, you have some options. 要转换它，您有一些选择。 You can do this: 你可以这样做：
var fruits = [...document.querySelectorAll(".demo")];
... is the spread operator, and it will spread out the resulting collection into the new array. ...是散布运算符，它将展开的集合散布到新数组中。 Or you can do this: 或者您可以这样做：
var fruits = Array.from(document.querySelectorAll(".demo"));
Or you can, of course, manually loop over the collection and push to an array, but I wouldn't recommend that. 当然，您也可以手动遍历集合并推送到数组，但是我不建议这样做。
Also, as the spread operator and Array.from method are both from ES6, I'd suggest switching over to using let or const instead of var , as those have block scope (and, in the case of const, constant-value enforcement) that are much more useful than the function scope of the older var . 另外，由于散布运算符和Array.from方法都来自ES6，因此我建议切换到使用let或const而不是var ，因为它们具有块范围（并且在const的情况下，采用常量值强制实施）这比旧版var的功能范围有用得多。
解决方案2
2 已采纳 2019-08-19 20:43:08
document.querySelectorAll returns a collection and not an array. document.querySelectorAll返回一个集合，而不是一个数组。 You need to use Array.from() to convert into an array 您需要使用Array.from（）转换为数组
function myFunction() { var fruits = document.querySelectorAll(".demo");//Outputs a collection //Change to array var fruitArray = Array.from(fruits).map(el => el.textContent); var y = document.getElementById("demo"); y.innerHTML += fruitArray.join(','); }
<p>Click the button to join the array elements into a string.</p> <button onclick="myFunction()">Try it</button> <p class="demo">Banana</p> <p class="demo">Orange</p> <p class="demo">Appl</p> <p id="demo"></p>
解决方案3
0 2019-08-19 20:30:11
var fruits = document.querySelectorAll(".demo")
这将包含所有元素
解决方案4
0 2019-08-19 20:35:20
This works! 这可行！
function myFunction() { var el = document.getElementsByClassName("demo"); var fruits = Object.keys(el). filter(function(v){ return el[v].innerText !== undefined; }) .map(function(v, i, o) { return el[v].innerText }) .join(" "); console.log(fruits); document.getElementById("demo").innerHTML = fruits; }
<!DOCTYPE html> <html> <body> <p>Click the button to join the array elements into a string.</p> <button onclick="myFunction()">Try it</button> <p class="demo">Banana</p> <p class="demo">Orange</p> <p class="demo">Appl</p> <p id="demo"></p> </body> </html>
解决方案5
0 2019-08-19 20:49:32
Try 尝试
function myFunction() {
var fruits = [];
document.querySelectorAll(".demo").forEach(x=>fruits.push(x.innerText));
demo.innerHTML = fruits.join`,`;
}
function myFunction() { var fruits = []; document.querySelectorAll(".demo").forEach(x=>fruits.push(x.innerText)); demo.innerHTML = fruits.join`,`; }
<p>Click the button to join the array elements into a string.</p> <button onclick="myFunction()">Try it</button> <p class="demo">Banana</p> <p class="demo">Orange</p> <p class="demo">Appl</p> <p id="demo"></p>
解决方案6
-1 2019-08-19 20:31:48
querySelectorAll returns a NodeList. querySelectorAll返回一个NodeList。 You need to convert it to an Array before using join. 使用联接之前，需要将其转换为数组。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.