javascript创建一个数组[关闭]

Question

我想创建一个包含所有这些以下 div 的 javascript 数组，以便我可以在它们上编写一个 for 循环函数。我应该如何创建这个数组？谢谢

<div class="Org-popover-body-1">
1
</div>

<div class="Org-popover-body-2">
2
</div>

<div class="Org-popover-body-3">
3
</div>

<div class="Org-popover-body-4">
4
</div>

<div class="Org-popover-body-5">
5
</div>

<div class="Org-popover-body-6">
6
</div>

Answer 1

只需使用document.querySelectorAll() 方法和诸如[class^="Org-popover-"] 之类的通配符，它​​匹配任何以Org-popover- 开头的类

---

console.log(document.querySelectorAll('[class^="Org-popover-"]'));

<div class="Org-popover-body-1">
1
</div>

<div class="Org-popover-body-2">
2
</div>

<div class="Org-popover-body-3">
3
</div>

<div class="Org-popover-body-4">
4
</div>

<div class="Org-popover-body-5">
5
</div>

<div class="Org-popover-body-6">
6
</div>

Answer 2

您可以通过两种不同的方式来解决这个问题。您可以使用类上的开始选择器来找到它们。

使用您拥有的标记

console.log( document.querySelectorAll('[class^="Org-popover-body-"]') );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Org-popover-body-1">
1
</div>

<div class="Org-popover-body-2">
2
</div>

<div class="Org-popover-body-3">
3
</div>

<div class="Org-popover-body-4">
4
</div>

<div class="Org-popover-body-5">
5
</div>

<div class="Org-popover-body-6">
6
</div>

添加了一个通用类。

你可以给他们一个通用的类并使用它。

console.log( document.querySelectorAll('.Org-popover-body') );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Org-popover-body Org-popover-body-1">
    1
    </div>

    <div class="Org-popover-body Org-popover-body-2">
    2
    </div>

    <div class="Org-popover-body Org-popover-body-3">
    3
    </div>

    <div class="Org-popover-body Org-popover-body-4">
    4
    </div>

    <div class="Org-popover-body Org-popover-body-5">
    5
    </div>

    <div class="Org-popover-body Org-popover-body-6">
    6
    </div>

Answer 3

如果他们有一个共同的班级会更容易，但由于他们没有，唯一的选择是attribute contains选择器和querySelectorAll

var elems = document.querySelectorAll('[class*="Org-popover-body-"]')
console.log(elems)

<div class="Org-popover-body-1">
1
</div>

<div class="Org-popover-body-2">
2
</div>

<div class="Org-popover-body-3">
3
</div>

<div class="Org-popover-body-4">
4
</div>

<div class="Org-popover-body-5">
5
</div>

<div class="Org-popover-body-6">
6
</div>