css计数器，用于编号li-id属性

Question

陷入一个有趣的问题。我需要在Wordpress wocommerce插件的实时页面上为

元素分配增量的"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>

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

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

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

<style>
.products  {
counter-reset: my-awesome-counter;
}
.products li:before {
counter-increment: my-awesome-counter;
content: counter(my-awesome-counter);
}
</style>

但它在图像上方的前端列出了产品：CSS计数器列出的产品示例

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

Answer 1

不要使用变量"i"，而是使用每个函数中提供的参数"index">

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

Answer 2

哇！我有一个解决方案，如果你熟悉javascript，它就相当简单。我没有。但是，在Ajax从插件或模块上传这些li后，要在Wordpress或其他网站的

中列出产品(无论什么)，由于这些插件的原因，您无法修改这些产品，必须更新等

因此，您只需要将wrap函数添加到您的函数中，该函数以类似li的方式对元素进行编号：

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

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