Extracting the SKU and description of products from an invoice by querying the DOM

Question

I have a site where a person can buy something. This site is built on a platform that allows any person to build a site without coding knowledge. One of the features of this platform, is that after the person buys something, I as the owner/operator can generate an invoice. All of the products and their details on the invoice are generated by a variable that is specific to the platform, and that I can not change, and therefore have to wait until after the products are generated to do something with them.

I push a button on the GUI of this easy-to-use platform to generate the invoice, and each product and most of it's details end up inside a <tr> with invoice-item-list as the class. Here is an example of what you see when you inspect the page in Chrome (for example). 3 products:

<tr class=" invoice-item-list" data-sku="COM-MON-EXAMP">
    <!--OTHER LINES OF HTML THAT I DON'T NEED TO QUERY-->
    <td class="ProductDetails">
        Example Product 1 | 1X1 Black
        <div class="ProductAttributes" style="">
            <div class="ConfigurableProductRow">
                <div class="Label">Choose Your Accessory Option Below:</div>
                <div class="Value">Option X</div>
                <div class="Value">Option X Description</div>
            </div>
        </div>
    </td>
</tr>
<tr class=" invoice-item-list" data-sku="COM-MON-EXAMP">
    <!--OTHER LINES OF HTML THAT I DON'T NEED TO QUERY-->
    <td class="ProductDetails">
        Example Product 2 | 47in
        <div class="ProductAttributes" style="">
            <div class="ConfigurableProductRow">
                <div class="Label">Choose Your Accessory Option Below:</div>
                <div class="Value">Option YY</div>
                <div class="Value">Option YY Description</div>
            </div>
        </div>
    </td>
</tr>
<tr class=" invoice-item-list" data-sku="COM-MON-EXAMP">
    <!--OTHER LINES OF HTML THAT I DON'T NEED TO QUERY-->
    <td class="ProductDetails">
        Example Product 3 | 1X1 Black
        <div class="ProductAttributes" style="">
            <div class="ConfigurableProductRow">
                <div class="Label">Choose Your Accessory Option Below:</div>
                <div class="Value">Option ZZZ</div>
                <div class="Value">Option ZZZ Description</div>
            </div>
        </div>
    </td>
</tr>

I want to iterate through each of the three <tr>'s pulling out the SKU and desciption from each, and then print them to the page in a specific place next to the product that is detailed within that (or each) <tr>.

An invoice could have one product, it could have 53 products, hence the for loops below.

MY QUESTION: I have been told that querying the DOM inside of a loop should be avoided - consider a for loop with var i = 0 - I find that I can not use i outside of that for loop, and therefore I get stuck doing some kind of querying within the loop.

I have two examples below. The first does all the querying within the loop. The second is kind of a mix, and I can not find a way to exclude querying altogether from the loop. Is number 2 an acceptable method, or do I need to avoid querying within a loop all together?

Code example 1

var orderLength = $(".invoice-item-list").length;
for (var i=0; i < orderLength; i++) {
    var skuValue = $(".invoice-item-list").eq(i).data('sku');
    var accessorySkuValue = $(".ProductDetails").eq(i).find(".Value").eq(0).text().trim();
    //JS HERE TO DO SOMETHING WITH THESE VARIABLES BEFORE THEY GET RE-DEFINED
    //IN THIS CASE, I WILL PRINT THEM TO THE PAGE NEXT TO THE PRODUCT
}

Code example 2

var orderLength = $(".invoice-item-list").length;
var invoiceItem = $(".invoice-item-list");
var productDetails = $(".ProductDetails");

for (var i=0; i < orderLength; i++) {
    var valSku = invoiceItem.eq(i).data('sku');
    var valAccessorySku = productDetails.eq(i).find(".Value").eq(0).text().trim();
    //JS HERE TO DO SOMETHING WITH THESE VARIABLES BEFORE THEY GET RE-DEFINED
    //IN THIS CASE, I WILL PRINT THEM TO THE PAGE NEXT TO THE PRODUCT
}

Answer 1

I have been told that querying the DOM inside of a loop should be avoided

That advice must refer to a specific situation which does not apply here (maybe animation or something?).

There's nothing wrong with looping over DOM queries - as you say, that's what makes sense here, as you have a list of things in the DOM.

However, you can clean things up considerably by using more of jQuery's features. For instance, the each function - no need to do a for loop.

Most of all, don't re-do queries if you don't have to. For instance, you have this:

var orderLength = $(".invoice-item-list").length;
var invoiceItem = $(".invoice-item-list");

which could just be written as

var invoiceItem = $(".invoice-item-list");
var orderLength = invoiceItem.length;

avoiding the need to re-query for the .invoice-item-list elements.

And you don't need to find the .ProductDetails ahead of time, since that element's nested under the item element anyway. Moreover, from the looks of the html you posted, there's no ambiguity about what the first .Value element is, meaning you can just go for that directly and skip the .ProductDetails query entirely.

Anyway, as mentioned, you don't need the separate for-loop if you just use each:

$(".invoice-item-list").each(function () {
  var item = $(this);
  var sku = item.data('sku');
  var accessory = item.find('div.Value:first').text().trim();

  // your stuff here...
});