在 WooCommerce 中完成 Ajax 事件后如何更改 HTML

Question

我有带有产品过滤器的 WooCommerce 产品列表页面。产品过滤器适用于 Ajax。 Ajax 影响产品列表 - 使用新项目重新加载新列表。我需要添加受 Ajax 项目影响的类。我为此使用 jQuery“ajaxComplete”。但是一旦 Ajax 事件完成，选择器类就不会添加到项目中。

看起来 jQuery 并没有“看到”Ajax 代码生成的所有 HTML 代码。我怎样才能得到它？

PS：我无法对 Ajax 代码进行任何更改，因为它是 WordPress/WooCommerce 代码，我不想更改它。

这里有一个简化的代码，仅供参考：

<h1> My products </h1>
<!-- Ajax affect all items down this row -->
<div id="items">
    <div class="item">
        <img src="..."/>
        <div>Product name</div>
    </div>
    <div class="item">
        <img src="..."/>
        <div>Product name</div>
    </div>
    ...
</div>
<!-- End of Ajax affect -->

<script>

jQuery(document).ready(function($) { 
    jQuery(".item").addClass("size_2x1");   // apply Class. After product filters appling this class removes.
});

jQuery( document ).on( "ajaxComplete", function() {
    jQuery(".item").addClass("size_2x1");   //  do not works
    jQuery("h1").hide();                    //  works
});

</script>

Answer 1

由于有多个项目具有相同的选择器类，因此您需要使用

each()

，为所有项目添加选择器类。我改进了下面的代码，进行了必要的更改：

jQuery(function($) { 
    $('div.item').each( function(){
        $(this).addClass('size_2x1');
    });


    $(document.body).on('ajaxComplete', function() {
        $('div.item').each( function(){
            if( ! $(this).hasClass('size_2x1') ) {
                $(this).addClass('size_2x1');
            }
        }); 
        $('h1').hide(); 
    });
});

现在它应该可以按预期工作。