Add count to jQuery added row in PHP foreach

Question

I'm working on a ecommerce cart, which builds products by a PHP foreach() loop, adding each product in a <tr>. This shop has 'bundled' products, meaning a couple of <tr>'s belong together as one big product.

The client asked me to edit the cart-view, add some stuff, move some around. So I used jQuery to add (i.e.) a legend after each head-item like so:

<tr>---- Item ----</tr>
    <tr>Added row</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>

<tr>---- Item ----</tr>
    <tr>Added row</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>

<tr>---- Item ----</tr>
    <tr>Added row</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>

Now, for various reasons I need to identify each group of products. I achieved this by adding a $i count in each head-item. The problem is that the added row is made by jQuery, outside the foreach-loop, and so doesn't have the $i count like the rest of them, result like this:

<tr class="head_1">---- Item ----</tr>
    <tr>Added row</tr>
    <tr class="detail_1">Detail</tr>
    <tr class="detail_1">Detail</tr>

<tr class="head_2">---- Item ----</tr>
    <tr>Added row</tr>
    <tr class="detail_2">Detail</tr>
    <tr class="detail_2">Detail</tr>
    <tr class="detail_2">Detail</tr>

<tr class="head_3">---- Item ----</tr>
    <tr>Added row</tr>
    <tr class="detail_3">Detail</tr>
    <tr class="detail_3">Detail</tr>
    <tr class="detail_3">Detail</tr>
    <tr class="detail_3">Detail</tr>

What I need is to add the same count in a class to the added jQuery row. I'm clueless on how to, anyone?

Moar details I add the row using jQuery('tr.head').after() like this:

jQuery( ".mainitem" ).after( "\
    <tr class='addedrow'>\
        <td class='product-remove'></td>\
        <td class='product-thumbnail'></td>\
        <td class='product-name'></td>\
        <td class='product-price'></td>\
        <td class='product-quantity'></td>\
        <td class='product-subtotal'></td>\
    </tr>" 
);

and figured I could get the count of the added rows like this: var $rowcount = jQuery(".addedrow").length;

Answer 1

This is probably the easiest fix: I added this to the jQuery script where the row was added, and it worked :)

$ii = 0;
jQuery('.addedrow').each(function(){
    $ii++;
    jQuery(this).addClass('count'+$ii);
});

Both given answers seem to be correct though, but required a different structure that I used in my code. Thanks all for getting me on the right track!

Answer 2

Would this work for you? define the head item in a var, then you can split that class to get the id. If there are multiple you can use the .each() of jquery like so:

jQuery( ".mainitem" ).each(function(){
var mainItem = $(this);
var id = mainItem.attr("id").split("_")[1];
mainItem.after( "\
    <tr class='addedrow groupid_"+ id +"'>\
        <td class='product-remove'></td>\
        <td class='product-thumbnail'></td>\
        <td class='product-name'></td>\
        <td class='product-price'></td>\
        <td class='product-quantity'></td>\
        <td class='product-subtotal'></td>\
    </tr>" 
);
});

This is of course assuming your header tr has the mainitem as class, oh this might cause issues because We're splitting on underscore, and the class would be something like "mainitem header_1", this would work but if it's as "header_1 mainitem" we need to change. But you can probably split on space and use the correct one.

Must add, this all feels a bit dirty :), so you're probably better off adding the header_1 as id so you're sure it's not nested with multiple classes, or use data-header-id attribute, that would be even cleaner.

Answer 3

jQuery('tr.head').after(function() {
    var current = this.prop('className');  
    var arr = current.split('_');
    return "<tr class='"+arr[1]+"'>" + Added row + "</tr>";
});