隨著數量的增加簡化重復的變數名稱-有解無憂

我正在嘗試為原始代碼中存在的 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)etc 也是如此，我正在使用 jQuery，所以如果可能的話，我想繼續使用它來讓它作業。

謝謝

uj5u.com熱心網友回復：

回圈！

根據您想要構建它的抽象程度，您可以使用一個或兩個回圈來構建具有鍵/值的單個物件變數。有幾種不同的方法可以構建這些回圈，所有這些都具有相似的結果（即，您是否關心鍵是1 -indexed 還是它們可以是min -indexed？）。

注意：如果沒有 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>

uj5u.com熱心網友回復：

你不需要 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>

uj5u.com熱心網友回復：

有一個概念叫動態變數名，用途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()評估表示為字串的代碼。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/472107.html

標籤：jQuery 变量

上一篇：計算變數時系統缺失

下一篇：基本AutoLisp變數，函式傳遞