Simplifying repeating variable names with increasing number-CodePudding

I'm trying to reduce these repeating variables for each of the 3 increasing variables that exist in the original code, this is because I need to repeat them all 50 times each to match how many rows of divs that exist in the original code:

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>

So is there a way of looping through the variable names dataA , dataB & dataC adding increasing numbers to them?.

I suppose the same for the :nth-child(16) , :nth-child(17) , :nth-child(18) etcand I'm using jQuery so would like to keep using it to get this working if that's possible.

Thanks

CodePudding user response：

Loops!

Depending on how abstract you want to build this, you can do it with one or two loops to build a single Object variable with key/values. There are a few different ways to build these loops, all with similar results (i.e. do you care if the keys are 1-indexed or can they be min-indexed?).

Note: without an HTML example it's not completely clear how the selectors should work. But this should be a good start.

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 >
  <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 >
  <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 >
  <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>

CodePudding user response：

You don't need 150 individual variables, that's too much unnecessary bookkeeping. In the following example is a function that will accept any jQuery collection and extract the text out of each element then return a single string containing a comma delimited list of the entire text:

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

The heart of the function is jQuery method .map() which is very simular to the JavaScript method .map() except instead of returning a transformed array, the jQuery version returns a transformed jQuery object.

jQuery objects are very verbose when exposed directly so we'll use .get() to get a simple array of DOM elements. The actual callback function uses the JavaScript property .textContent to extract the text:

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

.get() returns each of the elements' text as an array and .join() will return a the combined text of the array as a single string. If you want an array of strings (IMO a better way to handle multiple strings), pass a false flag (see example).

$.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>

CodePudding user response：

There is a concept called dynamic variable names, uses eval().
Your code would look something like this:

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();");
}

More simplified:

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() evaluates code represented as a string.