Question

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

元素分配增量'ids'，以便知道每个特定产品的编号。以下是产品输出的示例：

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

但它会在图像上方的前端列出产品： Example of products listing by CSS-counter

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

Answer 1

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

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

Answer 2

喔！我有解决方案，如果你很了解javascript，它就相当简单了。我不。但是要列出Wordpress或其他网站的

中的产品（无论如何），这些li是由Ajax从插件或模块上传的，你不能通过这些插件的原因修改这些产品必须更新等。< p>

所以，你只需要在你的函数中添加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>

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

css counter to number li id attributes

2 个答案: