在 PHP foreach 中向 jQuery 添加行添加计数答案

【问题标题】：Add count to jQuery added row in PHP foreach在 PHP foreach 中向 jQuery 添加行添加计数
【发布时间】：2016-01-30 16:39:54
【问题描述】：

我正在开发一个电子商务购物车，它通过 PHP foreach() 循环构建产品，将每个产品添加到 <tr> 中。这家商店有“捆绑”产品，这意味着几个<tr> 属于一个大产品。

客户要求我编辑购物车视图，添加一些东西，移动一些东西。所以我使用jQuery在每个head-item之后添加（即）一个图例，如下所示：

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

【问题讨论】：

如果你使用 PHP 为什么不能使用 php 变量作为计数器？
你能展示你用来添加行的jquery吗？您可以获取要添加行的父元素的类并使用其计数器。
@SajithaNilan;因为有问题的行是使用 jQuery.after 在 foreach() 循环之外添加的
@Ranker;用于添加行的 jQuery 在问题的末尾；按类提取每个“主”行，使用 after() 添加新行。我已经更新了完整的代码
尝试用我回答的代码替换你的 jQuery('tr.head').after()。

标签： php jquery loops foreach

【解决方案1】：

这可能是最简单的解决方法：我将它添加到添加行的 jQuery 脚本中，并且它起作用了 :)

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

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

【讨论】：

这样，确实比较简单。
确实很整洁。它可能产生的一个可能错误是您的 php 将跳过其中一个 tr 并且计数器将像 1、2、4、5 一样。在这种情况下，您添加的行将不匹配。
我同意，它并不完美，因为有出错的余地（尽管我怀疑它很快就会出错）。尽管客户知道这一点；你不能完美和快速在一起。我们将暂时使用它，并在未来改进代码。

【解决方案2】：

这对你有用吗？在 var 中定义头项，然后您可以拆分该类以获取 id。如果有多个，您可以像这样使用 jquery 的 .each() ：

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 属性，那样会更清洁。

【讨论】：

如果您使用的是类顺便说一句，我在 attr("id") 上犯了一个错误。但我敢打赌，你可以想出一个，应该是类

【解决方案3】：

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

【讨论】：