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

Question

我正在尝试为原始代码中存在的 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 所以我想继续使用它来让这个工作，如果有可能。

谢谢

Answer 1

有一个概念叫做dynamic variable names，使用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() 评估表示为字符串的代码。

Answer 2

循环！

根据您想要构建它的抽象程度，您可以使用一个或两个循环来使用 key/values 构建单个对象变量。有几种不同的方法来构建这些循环，所有方法都有相似的结果（即你关心键是 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>

Answer 3

您不需要 150 个单独的变量，那是不必要的簿记工作。在下面的示例中是一个函数，它将接受任何 jQuery 集合并从每个元素中提取文本，然后 return 一个包含整个文本的逗号分隔列表的字符串：

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

函数的核心是jQuery方法.map()，它与JavaScript方法.map()非常相似，除了不是return转换数组，jQuery 版本 return 是一个转换后的 jQuery 对象。

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

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

.get() return 将每个元素的文本作为一个数组，.join() 将 return 将数组的组合文本作为单个字符串。如果您想要一个字符串数组（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>

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

Simplifying repeating variable names with increasing number

variables

jquery