随着数量的增加，简化重复的变量名

我试图为原始代码中存在的3个递增变量中的每一个减少这些重复变量，这是因为我需要将它们全部重复50次，以匹配原始代码中的div行数：

var dataA1 = $('.divA:nth-child(16)').text();
var dataA2 = $('.divA:nth-child(17)').text();
var dataA3 = $('.divA:nth-child(18)').text();
var dataA4 = $('.divA:nth-child(19)').text();
var dataA5 = $('.divA:nth-child(20)').text();
var dataB1 = $('.divB:nth-child(16)').text();
var dataB2 = $('.divB:nth-child(17)').text();
var dataB3 = $('.divB:nth-child(18)').text();
var dataB4 = $('.divB:nth-child(19)').text();
var dataB5 = $('.divB:nth-child(20)').text();
var dataC1 = $('.divC:nth-child(16)').text();
var dataC2 = $('.divC:nth-child(17)').text();
var dataC3 = $('.divC:nth-child(18)').text();
var dataC4 = $('.divC:nth-child(19)').text();
var dataC5 = $('.divC:nth-child(20)').text();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

那么有没有一种循环通过变量名dataA、dataB&dataC加上递增数++？。

我想:nth-child(16)、:nth-child(17)、:nth-child(18)等也是如此，我正在使用jQuery，所以如果可能的话，我想继续使用它来实现这一点。

感谢

循环！

根据您想要构建它的抽象程度，您可以使用一个或两个循环来构建具有键/值的单个Object变量。有几种不同的方法可以构建这些循环，所有这些方法都具有相似的结果(即，你关心键是1索引的还是min-索引的？)。

注意：如果没有HTML示例，选择器应该如何工作还不完全清楚。但这应该是一个良好的开端

var min = 4;
var max = 9;
var letters = ['A', 'B', 'C'];
var data = {};
// for each letter
for (var l = 0; l < letters.length; l++) {
var letter = letters[l]; // temp variable

// for each integer between min and max (inclusive)
for (var i = min; i <= max; i++) {
var keyIndex = i - min + 1; // temp variable

// set this value in the data object
data['data' + letter + keyIndex] = $('.div' + letter + ' :nth-child(' + i + ')').text();
}
}
// output the full data object
console.log(data);
// output each key/value
for (var key in data) {
console.log(key);
console.log(data[key]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divA">
<div>a-1</div>
<div>a-2</div>
<div>a-3</div>
<div>a-4</div>
<div>a-5</div>
<div>a-6</div>
<div>a-7</div>
<div>a-8</div>
<div>a-9</div>
<div>a-10</div>
</div>
<div class="divB">
<div>b-1</div>
<div>b-2</div>
<div>b-3</div>
<div>b-4</div>
<div>b-5</div>
<div>b-6</div>
<div>b-7</div>
<div>b-8</div>
<div>b-9</div>
<div>b-10</div>
</div>
<div class="divC">
<div>c-1</div>
<div>c-2</div>
<div>c-3</div>
<div>c-4</div>
<div>c-5</div>
<div>c-6</div>
<div>c-7</div>
<div>c-8</div>
<div>c-9</div>
<div>c-10</div>
</div>

您不需要150个单独的变量，这是太多不必要的记账。在以下示例中，有一个函数将接受任何jQuery集合，并从每个元素中提取文本，然后返回一个包含逗号分隔的整个文本列表的单个字符串：

$('.A, .B, .C').extractText();

函数的核心是jQuery方法.map()，它与JavaScript方法.map()非常相似，只是jQuery版本返回的不是转换后的数组，而是转换后的jQuery对象。

jQuery对象在直接公开时非常详细，因此我们将使用.get()来获取DOM元素的简单数组。实际的回调函数使用JavaScript属性.textContent来提取文本：

let text = this.map(function() {
return this.textContent;
}).get().join(', ');

.get()将每个元素的文本作为数组返回，.join()将数组的组合文本作为单个字符串返回。如果您想要一个字符串数组(IMO是处理多个字符串的更好方法)，请传递false标志(参见示例)。

$.fn.extractText = function(str = true) {
let list = this.map(function() {
return this.textContent;
}).get();
if (!str) return list;
return list.join(', ');
}
const $abc = $('.A, .B, .C');
console.log(`Total Number of "div.A", "div.B", and "div.C" is ${$abc.length}`);
let ABC = $abc.extractText();
console.log(`A string of the entire text of all "div.A", "div.B", and "div.C"`)
console.log(ABC);
ABC = $abc.extractText(false);
console.log(`If an array of stings is need instead, pass the parameter as false (it's true by default)`)
console.log(ABC);

.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { min-height: 100% !important; width: 80%; margin-left: 20%; }

<div class=A>A01</div><div class=A>A02</div><div class=A>A03</div><div class=A>A04</div><div class=A>A05</div><div class=A>A06</div><div class=A>A07</div><div class=A>A08</div><div class=A>A09</div><div class=A>A10</div><div class=A>A11</div><div class=A>A12</div><div class=A>A13</div><div class=A>A14</div><div class=A>A15</div><div class=A>A16</div><div class=A>A17</div><div class=A>A18</div><div class=A>A19</div><div class=A>A20</div><div class=A>A21</div><div class=A>A22</div><div class=A>A23</div><div class=A>A24</div><div class=A>A25</div><div class=A>A26</div><div class=A>A27</div><div class=A>A28</div><div class=A>A29</div><div class=A>A30</div><div class=A>A31</div><div class=A>A32</div><div class=A>A33</div><div class=A>A34</div><div class=A>A35</div><div class=A>A36</div><div class=A>A37</div><div class=A>A38</div><div class=A>A39</div><div class=A>A40</div><div class=A>A41</div><div class=A>A42</div><div class=A>A43</div><div class=A>A44</div><div class=A>A45</div><div class=A>A46</div><div class=A>A47</div><div class=A>A48</div><div class=A>A49</div><div class=A>A50</div><div class=B>B01</div><div class=B>B02</div><div class=B>B03</div><div class=B>B04</div><div class=B>B05</div><div class=B>B06</div><div class=B>B07</div><div class=B>B08</div><div class=B>B09</div><div class=B>B10</div><div class=B>B11</div><div class=B>B12</div><div class=B>B13</div><div class=B>B14</div><div class=B>B15</div><div class=B>B16</div><div class=B>B17</div><div class=B>B18</div><div class=B>B19</div><div class=B>B20</div><div class=B>B21</div><div class=B>B22</div><div class=B>B23</div><div class=B>B24</div><div class=B>B25</div><div class=B>B26</div><div class=B>B27</div><div class=B>B28</div><div class=B>B29</div><div class=B>B30</div><div class=B>B31</div><div class=B>B32</div><div class=B>B33</div><div class=B>B34</div><div class=B>B35</div><div class=B>B36</div><div class=B>B37</div><div class=B>B38</div><div class=B>B39</div><div class=B>B40</div><div class=B>B41</div><div class=B>B42</div><div class=B>B43</div><div class=B>B44</div><div class=B>B45</div><div class=B>B46</div><div class=B>B47</div><div class=B>B48</div><div class=B>B49</div><div class=B>B50</div><div class=C>C01</div><div class=C>C02</div><div class=C>C03</div><div class=C>C04</div><div class=C>C05</div><div class=C>C06</div><div class=C>C07</div><div class=C>C08</div><div class=C>C09</div><div class=C>C10</div><div class=C>C11</div><div class=C>C12</div><div class=C>C13</div><div class=C>C14</div><div class=C>C15</div><div class=C>C16</div><div class=C>C17</div><div class=C>C18</div><div class=C>C19</div><div class=C>C20</div><div class=C>C21</div><div class=C>C22</div><div class=C>C23</div><div class=C>C24</div><div class=C>C25</div><div class=C>C26</div><div class=C>C27</div><div class=C>C28</div><div class=C>C29</div><div class=C>C30</div><div class=C>C31</div><div class=C>C32</div><div class=C>C33</div><div class=C>C34</div><div class=C>C35</div><div class=C>C36</div><div class=C>C37</div><div class=C>C38</div><div class=C>C39</div><div class=C>C40</div><div class=C>C41</div><div class=C>C42</div><div class=C>C43</div><div class=C>C44</div><div class=C>C45</div><div class=C>C46</div><div class=C>C47</div><div class=C>C48</div><div class=C>C49</div><div class=C>C50</div><script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>

有一个称为动态变量名的概念，使用eval()
你的代码看起来像这样：

for (let i = 1; i < 6; i++) {
eval("var dataA"+i+" = $('.divA:nth-child("+(i+15)+")').text();");
}
for (let i = 1; i < 6; i++) {
eval("var dataB"+i+" = $('.divB:nth-child("+(i+15)+")').text();");
}
for (let i = 1; i < 6; i++) {
eval("var dataC"+i+" = $('.divC:nth-child("+(i+15)+")').text();");
}

更加简化：

const letter = ["A", "B", "C"];
letter.forEach(element => {
for (let i = 1; i < 6; i++) {
eval("var data"+element+i+" = $('.div"+element+":nth-child("+(i+15)+")').text();");
}
});

eval()计算表示为字符串的代码。

相关内容

最新更新

热门标签：