jQuery过滤功能导致无响应的脚本

Question

我有一个列出产品类别的网站。

使用 jQuery，我正在查看每个产品的标题链接并过滤掉任何带有“销售”、“清仓”或“新”字样的内容。

然后，根据收到的结果，我将在产品缩略图上添加“销售”、“清仓”或“新”横幅图像。

当我的脚本只在标题链接中找到 1 或 2 个带有这些词的产品时，这似乎工作得很好，但是如果我尝试在一个页面上运行我的脚本，比如说 20 个产品，我的浏览器会冻结，我得到无响应的脚本警告。

有没有人介意看看我下面的代码，看看我是在哪里导致这个问题的？据我所知，似乎我试图在每个结果中多次叠加“横幅”图像，我认为这是导致我的脚本变得无响应的原因。

这是我的 jQuery 代码：

// Set CSS position to relative for each thumbnail container
$('.ProductImage').css('position','relative');
// Find the title for each product on the page
var $title = $('div.product a.title');

// START SALE PRODUCTS
var theSaleTitle = $($title);
// Search for all SALE products by finding the word "sale" in the title element
var iSale = $(theSaleTitle).filter(function() {
    return $(this).text().trim().toLowerCase().indexOf('sale') != -1;
});
$(iSale).each(function(){
    // Select each matching title element's parent
    var parentSale = $(iSale).parent();
    // Select the thumbnail image for each parent
    var Sale = $('a img', parentSale);
    // Insert "SALE" ribbon before each thumbnail for products with "sale" in the title element
    $(Sale).each(function() {;
        $('a img', parentSale).before("<img style='position:absolute;top:-3px;left:-3px;border:0;' src='/content/images/sale-ribbon.png'/>");
    });
    // Remove the word "Sale" from the product title for each sale product
    $(this).html($(this).html().replace(/sale/ig,''))
});
// END SALE PRODUCTS

这是我的示例 HTML 代码：

<div class="product">
    <a href="#"></a><div data-product="4318" class="ProductImage QuickView" style="position: relative;"><a href="#">
    </a><a href="/sigep-black-mega-flag-tee/"><img alt="SigEp Black Mega Flag Tee" src="/products/4318/images/2369/052183__14662.1363380086.230.230.jpg"></a>
    <div class="QuickViewBtn" style="background: -moz-linear-gradient(center top , rgb(247, 247, 247), rgb(220, 219, 219)) repeat scroll 0% 0% transparent; color: rgb(0, 0, 0); display: none; margin: 0px; top: 96.5px; left: 60px;" data-product="4318">Quick View</div>
</div>

<a class="title " href="/sigep-black-mega-flag-tee/">sale SigEp Black Mega Flag Tee</a>
<span class="price">$19.95</span>

</div>

如果我可以提供任何进一步的信息来帮助解决问题，请告诉我，感谢您查看！

更新：按照要求，我已将代码缩短为 1 个产品的较小示例，并在产品标题链接中仅搜索“销售”一词。

Answer 1

我不明白你为什么要使用这样的选择器。您编写 jQuery 代码的方式可能存在性能问题。为什么不尝试这样的事情：

// Set CSS position to relative for each thumbnail container
$('.ProductImage').css('position','relative');

// Search for all SALE products by finding the word "sale" in the title element
$('div.product a.title').each(function() {
    if ($(this).text().toLowerCase().indexOf('sale') != -1) {
        $(this)
            .parent()
            // Select the thumbnail image for each parent
            .find('a img')
            // Insert "SALE" ribbon before each thumbnail for products with "sale" in the title element
            .before("<img style='position:absolute;top:-3px;left:-3px;border:0;' src='/content/images/sale-ribbon.png'/>");
        // Remove the word "Sale" from the product title for each sale product
        $(this).html($(this).html().replace(/sale/ig,''))
    }
});
// END SALE PRODUCTS

您不需要对元素进行两次迭代。第一次过滤，第二次应用更改。

你不需要那么多变量和奇怪的选择器。使用链接并了解何时可以通过一个 jQuery 函数将操作应用于多个元素。