'How to use ":nth-child()" in a loop with complex querySelector()

Extracting data into a single array with querySelector works:

var don1 = [];
var don2 = [];
var don3 = [];
var num = 3;

function getData(num) {

  for (i = 1; i < num + 1; i++) {

    let y = eval("don" + i.toString());
    console.log("checkpoint " + i + ": y = " + y);

    y[0] = document.querySelector(
      "[data-dynamic='project.ProjectCode']"
    ).innerHTML.replace(/\s/g, "");

    y[1] = document.querySelector(
      "[data-react-component-name='DonationAmount'] input[type='text']"
    ).value;

    y[2] = document.querySelector(
      "[data-react-component-name='Frequency'] > select"
    ).options[
      document.querySelector(
        "[data-react-component-name='Frequency'] > select"
      ).selectedIndex
    ].text;
    console.log("checkpoint " + i + ": y = " + y);
  }
}

<button class="button1" onclick="getData(3)" type="button"> getData </button>

<p id="demo">0</p>

<div data-component="cart.populated">
  <div data-component="cart.populated.project">
    <div class="row">

      <label>
        PROJ 1
      </label>
      <br>
      <label>
        Donation Amount:
      </label>

      <span data-react-component-name="DonationAmount">
        <input type="text" value="$50.00" maxlength="10">
      </span>

      <span data-react-component-name="Frequency">
        <select>
          <option value="O">One Time</option>
          <option value="M">Monthly</option>
        </select>
      </span>

      <label data-dynamic="project.ProjectCode">
        101
      </label>
    </div>
    <div class="row">

      <label>
        Erica
      </label>
      <br>
      <label>
        Donation Amount:
      </label>

      <span data-react-component-name="DonationAmount">
        <input type="text" value="$20.00" maxlength="10">
      </span>

      <span data-react-component-name="Frequency">
        <select>
          <option value="O">One Time</option>
          <option value="M">Monthly</option>
        </select>
      </span>

      <label data-dynamic="project.ProjectCode">
        102
      </label>
    </div>
    <div class="row">

      <label>
        Allison
      </label>
      <br>
      <label>
        Donation Amount:
      </label>

      <span data-react-component-name="DonationAmount">
        <input type="text" value="$10.00" maxlength="10">
      </span>

      <span data-react-component-name="Frequency">
        <select>
          <option value="O">One Time</option>
          <option value="M">Monthly</option>
        </select>
      </span>

      <label data-dynamic="project.ProjectCode">
        103
      </label>
    </div>
  </div>
</div>

Extracting data into multiple arrays using :nth-child doesn't seem to work:

var don1 = [];
var don2 = [];
var don3 = [];
var num = 3;

function getData(num) {

  for (i = 1; i < num + 1; i++) {

    let y = eval("don" + i.toString());
    console.log("checkpoint " + i + ": y = " + y);

    y[0] = document
      .querySelector("[data-dynamic='project.ProjectCode']:nth-child(" + i + ")")
      .innerHTML.replace(/\s/g, "");

    y[1] = document.querySelector(
      "[data-react-component-name='DonationAmount'] input[type='text']:nth-child(" + i + ")").value;

    y[2] = document.querySelector(
      "[data-react-component-name='Frequency'] > select:nth-child(" + i + ")").options[
      document.querySelector(
        "[data-react-component-name='Frequency'] > select:nth-child(" + i + ")").selectedIndex
    ].text;
    console.log("checkpoint " + i + ": y = " + y);
  }
}

<button class="button1" onclick="getData(3)" type="button"> getData </button>

<p id="demo">0</p>

<div data-component="cart.populated">
  <div data-component="cart.populated.project">
    <div class="row">

      <label>
        PROJ 1
      </label>
      <br>
      <label>
        Donation Amount:
      </label>

      <span data-react-component-name="DonationAmount">
        <input type="text" value="$50.00" maxlength="10">
      </span>

      <span data-react-component-name="Frequency">
        <select>
          <option value="O">One Time</option>
          <option value="M">Monthly</option>
        </select>
      </span>

      <label data-dynamic="project.ProjectCode">
        101
      </label>
    </div>
    <div class="row">

      <label>
        Erica
      </label>
      <br>
      <label>
        Donation Amount:
      </label>

      <span data-react-component-name="DonationAmount">
        <input type="text" value="$20.00" maxlength="10">
      </span>

      <span data-react-component-name="Frequency">
        <select>
          <option value="O">One Time</option>
          <option value="M">Monthly</option>
        </select>
      </span>

      <label data-dynamic="project.ProjectCode">
        102
      </label>
    </div>
    <div class="row">

      <label>
        Allison
      </label>
      <br>
      <label>
        Donation Amount:
      </label>

      <span data-react-component-name="DonationAmount">
        <input type="text" value="$10.00" maxlength="10">
      </span>

      <span data-react-component-name="Frequency">
        <select>
          <option value="O">One Time</option>
          <option value="M">Monthly</option>
        </select>
      </span>

      <label data-dynamic="project.ProjectCode">
        103
      </label>
    </div>
  </div>
</div>

Solution 1:^[1]

[NOT FINISHED] This is what I've got working so far, have to head out but will fix it up more later:

var don1 = [];
var don2 = [];
var don3 = [];
var num = 3;

function getData(num) {

  for (i = 1; i < num + 1; i++) {

    let y = eval("don" + i.toString());
    console.log("checkpoint " + i + ": y = " + y);

    y[0] = document
      .querySelector(`[data-component='cart.populated.project']:nth-child(${i}) [data-dynamic='project.ProjectCode']`)
      .innerHTML.replace(/\s/g, "");

    y[1] = document.querySelector(
      `[data-component='cart.populated.project']:nth-child(${i}) [data-react-component-name='DonationAmount'] input[type='text']`).value;

    y[2] = document.querySelector(
      `[data-component='cart.populated.project']:nth-child(${i}) [data-react-component-name='Frequency'] > select`).options[
      document.querySelector(
        `[data-component='cart.populated.project']:nth-child(${i}) [data-react-component-name='Frequency'] > select`).selectedIndex
    ].text;
    console.log("checkpoint " + i + ": y = " + y);
  }
}

<button class="button1" onclick="getData(3)" type="button"> getData </button>

<p id="demo">0</p>

<div data-component="cart.populated">
  <div data-component="cart.populated.project">
    <div class="row">

      <label>
        PROJ 1
      </label>
      <br>
      <label>
        Donation Amount:
      </label>

      <span data-react-component-name="DonationAmount">
        <input type="text" value="$50.00" maxlength="10">
      </span>

      <span data-react-component-name="Frequency">
        <select>
          <option value="O">One Time</option>
          <option value="M">Monthly</option>
        </select>
      </span>

      <label data-dynamic="project.ProjectCode">
        101
      </label>
    </div>
    <div class="row">

      <label>
        Erica
      </label>
      <br>
      <label>
        Donation Amount:
      </label>

      <span data-react-component-name="DonationAmount">
        <input type="text" value="$20.00" maxlength="10">
      </span>

      <span data-react-component-name="Frequency">
        <select>
          <option value="O">One Time</option>
          <option value="M">Monthly</option>
        </select>
      </span>

      <label data-dynamic="project.ProjectCode">
        102
      </label>
    </div>
    <div class="row">

      <label>
        Allison
      </label>
      <br>
      <label>
        Donation Amount:
      </label>

      <span data-react-component-name="DonationAmount">
        <input type="text" value="$10.00" maxlength="10">
      </span>

      <span data-react-component-name="Frequency">
        <select>
          <option value="O">One Time</option>
          <option value="M">Monthly</option>
        </select>
      </span>

      <label data-dynamic="project.ProjectCode">
        103
      </label>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Zach Jensz

'How to use ":nth-child()" in a loop with complex querySelector()

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]