Jquery css计数器到number li id属性

困在一个有趣的问题上。我需要在Wordpress wocommerce插件的live页面上为

元素分配增量“ID”，以便了解每个特定产品的编号。以下是产品输出的示例：

<ul class="clearfix products"> 
<li id="1" class="post-12345 " data-product-id="12345"> Product 1</li>
<li id="2" class="post-2222 " data-product-id="2222"> Product 2 </li>
<li id="3" class="post-3333" data-product-id="3333"> Product 3</li>
...etc
</ul>

产品1
产品2
产品3
等

现在id由footer.php上的jQuery代码分配：

<script>
jQuery(document).ready(function($) {
    var i = 0;
    $(".row ul li").each(function(){
        i++;
        $(this).attr("id", i));

    });
});
</script>

jQuery（文档）.ready（函数（$）{
var i=0；
$（“.row ul li”）。每个（函数（）{
i++；
$（this.attr（“id”，i））；
});
});

所有这些都很好，但是我们在页面上有一个Ajax无限滚动，所以在向下滚动之后，新产品就会出现。问题是：产品的新部分刷新了ID（从1到24）。我已经尝试了很多不同的方法来解决这个问题，包括静态php变量、wordpress计数器函数等。但是我注意到，对于这种情况，唯一有效的方法是CSS计数器。这样的代码确实正确地对产品进行了编号（之前）：

.产品{
计数器重置：我的可怕计数器；
}
李：以前{
计数器增量：我的可怕计数器；
内容：计数器（我最棒的计数器）；
}

但它在图片上方的前端列出了产品：

---

但我如何将这些数字添加到属性中？换句话说，是否有什么东西可以将CSS计数器值放入jQuery函数的每个值中，例如？

使用每个函数中提供的参数“index”，而不是使用变量“i”

jQuery(document).ready(function($) {
  $(".row ul li").each(function(index, element){
      $(this).attr("id", index));
  });
});

---

哇！我有一个解决方案，如果你对javascript很了解的话，它就相当简单了。我不知道。但是，如果要在Wordpress的

或其他站点中列出产品（无论什么），在这些li通过Ajax从插件或模块上传之后，您不能因为这些插件的原因而修改这些产品，则必须对其进行更新等

因此，您只需将wrap函数添加到函数中，该函数以li对元素进行编号，如：

<script>   

$('.products').on("DOMNodeInserted", function (event) { 
        var id_index = 1;
        $('.product').each(function() {             
            $(this).attr('data-id', id_index);
            id_index++;             
        })          
    });
});
</script>

$（'.products'）.on（“域节点插入”，函数（事件）{
var id_指数=1；
$（'.product'）。每个（函数（）{
$（this）.attr（'data-id'，id\u索引）；
id_index++；
})          
});
});

---

这段代码将为您的产品列表添加新的数据属性

谢谢您的快速回答，Sharmila！但我不太明白我从哪里获取函数（索引、元素）参数？据我所知，您的变体与CSS计数器无关，对吗？工作方式如下：jQuery（document）.ready（函数（$）{$（“.row ul li”）.each（函数（index）{$（this）.attr（“id”，index））；}；}）；但只在第一屏。在Ajax刷新ID后清空希望您需要在Ajax成功回调后调用此函数。。它将从一开始就开始重新分配。好吧，实际上什么都不起作用。即使javascript中的settimeout interval在产品列表上传的第三次迭代后也无法工作。因此，我认为唯一的方法是将css计数器放在

的正确id或数据id上。如果成功，我会回信的。欢迎任何其他想法！

<script>   

$('.products').on("DOMNodeInserted", function (event) { 
        var id_index = 1;
        $('.product').each(function() {             
            $(this).attr('data-id', id_index);
            id_index++;             
        })          
    });
});
</script>