jquery - 数字 li id 属性的 css 计数器

Question

卡在一个有趣的问题上。我需要将增量“ID”分配给

Wordpress wocommerce 插件上的实时页面上的元素，以便了解每个特定产品的编号。这是产品输出的示例：

<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-counter 列出的产品示例

但是我怎样才能把这些数字放到属性中呢？换句话说，有没有什么东西可以把 CSS 计数器值放到 jQuery 函数的每个值上？

Answer 1

哇！我有解决方案，如果您熟悉 javascript，它会相当简单。我不。但是要在

在通过 Ajax 从插件或模块上传这些 li 后，Wordpress 或其他网站的内容，由于这些插件的原因，您无法修改，必须更新等。

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

<script>   

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

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

Answer 2

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

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