将count添加到PHP foreach中jQuery添加的行

Question

我正在开发一个电子商务车，它通过PHP foreach（）循环构建产品，并将每个产品添加到<tr>中。这家商店有"捆绑"产品，这意味着两个<tr>作为一个大产品属于一起。

客户让我编辑购物车视图，添加一些东西，移动一些。所以我用jQuery在每个标题项目后面添加了一个图例，比如：

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

现在，由于各种原因，我需要识别每一组产品。我通过在每个标题项目中添加$i计数来实现这一点。问题是，添加的行是由jQuery在foreach循环之外生成的，因此不像其他行那样具有$i计数，结果如下：

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

我需要的是将类中的相同计数添加到添加的jQuery行中。我不知道怎么做，有人吗？

护城河细节我使用jQuery('tr.head').after()添加行，如下所示：

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

我想我可以得到添加行的计数，如下所示：var $rowcount = jQuery(".addedrow").length;

Answer 1

这可能是最简单的修复方法：我将其添加到添加行的jQuery脚本中，它起到了作用：）

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

虽然给出的两个答案似乎都是正确的，但需要我在代码中使用的不同结构。谢谢大家让我走上正轨！

Answer 2

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

Answer 3

这对你有用吗？在var中定义头项，然后可以拆分该类以获得id。如果有多个，可以使用jquery的.ech（），比如：

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

当然，这是假设您的头tr将mainitem作为类，哦，这可能会导致问题，因为我们在下划线上进行拆分，并且类将类似于"mainitem header_1"，这是可行的，但如果它是"header_1 mainitem"，我们需要更改。但你可能会在空间上分开，并使用正确的空间。

必须添加，这一切感觉有点脏：），所以你可能最好将header_1添加为id，这样你就可以确保它没有嵌套多个类，或者使用data-header-id属性，这会更干净。