导致脚本无响应的jQuery筛选器函数

我有一个网站，列出了一类产品

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

//将每个缩略图容器的CSS位置设置为相对位置
$（'.ProductImage'）.css（'position'，'relative'）；
//在页面上查找每个产品的标题
变量$title=$（'div.product a.title'）；
//开始销售产品
var theSaleTitle=$（$title）；
//通过在title元素中查找单词“SALE”来搜索所有销售产品
var iSale=$（theSaleTitle）.filter（函数（）{
返回$（this）.text（）.trim（）.toLowerCase（）.indexOf（'sale'）！=-1；
});
$（iSale）.each（function（）{
//选择每个匹配标题元素的父元素
var parentSale=$（iSale.parent（）；
//为每个父对象选择缩略图
var销售=$（'a img'，parentSale）；
//在标题元素中包含“销售”的产品的每个缩略图前插入“销售”功能区
$（销售）。每个（功能（）{；
美元（'a img'，parentSale.），在（“”）之前；
});
//从每个销售产品的产品名称中删除“销售”一词
$（this.html（$（this.html（）.replace（/sale/ig'））
});
//终端销售产品

下面是我的示例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>

快速查看
$19.95

请让我知道，如果我可以提供任何进一步的信息，以帮助排除故障，并感谢您的关注

---

更新：如有人问，我已将代码缩短为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

//将每个缩略图容器的CSS位置设置为相对位置
$（'.ProductImage'）.css（'position'，'relative'）；
//通过在title元素中查找单词“SALE”来搜索所有销售产品
$（'div.product a.title'）。每个（函数（）{
if（$（this）.text（）.toLowerCase（）.indexOf（'sale'）！=-1）{
$（本）
.parent（）
//为每个父对象选择缩略图
.find（'a img'））
//在标题元素中包含“销售”的产品的每个缩略图前插入“销售”功能区
。在（“”）之前；
//从每个销售产品的产品名称中删除“销售”一词
$（this.html（$（this.html（）.replace（/sale/ig'））
}
});
//终端销售产品

您不需要在元素上迭代两次。第一次用于筛选，第二次用于应用更改

---

您不需要这么多变量和奇怪的选择器。当您可以使用一个jQuery函数将一个操作应用于多个元素时，请使用链接和学习。

我不明白您为什么要使用这样的选择器。编写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

//将每个缩略图容器的CSS位置设置为相对位置
$（'.ProductImage'）.css（'position'，'relative'）；
//通过在title元素中查找单词“SALE”来搜索所有销售产品
$（'div.product a.title'）。每个（函数（）{
if（$（this）.text（）.toLowerCase（）.indexOf（'sale'）！=-1）{
$（本）
.parent（）
//为每个父对象选择缩略图
.find（'a img'））
//在标题元素中包含“销售”的产品的每个缩略图前插入“销售”功能区
。在（“”）之前；
//从每个销售产品的产品名称中删除“销售”一词
$（this.html（$（this.html（）.replace（/sale/ig'））
}
});
//终端销售产品

您不需要在元素上迭代两次。第一次用于筛选，第二次用于应用更改

---

您不需要这么多变量和奇怪的选择器。当您可以使用一个jQuery函数将一个操作应用于多个元素时，请使用链接和学习。

您认为您可以简化此代码的大小写，使其变得更小，从而强调给您带来性能问题的部分吗？我刚刚编辑了我的原始帖子，以便代码示例更小。如果你有足够的信息，请告诉我。谢谢你认为你可以简化这段代码的大小写，使它大大缩小，强调给你带来性能问题的部分吗？我刚刚编辑了我的原始文章，使代码示例小得多。如果你有足够的信息，请告诉我。谢谢另外，如果您只需要在锚元素的文本内容中替换“sale”字符串，您也可以在最后使用

.text（）

来替换它。谢谢@Haralan Dobrev，如果我想在标题中查找带有“clearance”一词的其他产品，那么我是否可以添加一个额外的

if

语句并将“sale”更改为“清除“你可以这么做。我建议将操作代码放在一个单独的函数中，并在找到具有不同参数的匹配单词时调用它。谢谢！成功了！我正在努力更好地了解jQuery，似乎我一直在努力让事情变得更加困难：）我只需要记住保持简单。你也可以使用

.tex