Question

有人让我想到使用'match'来定位一个主体类为'ly_productdetails ProductDetails en en_GB'的页面，以填充页面（容器）上的特定div。

这解决了我在div为空的情况下的问题，但如果存在HTML则替换所有内容。

我如何修改我的JS以不替换内容，而是首先添加新代码段，然后添加现有内容？

提前致谢。

$(function() {    // document ready
    var body = $(document.body);    // body element

    // If match and length then modify html
    if (body.attr('class').match(/ly_productdetails ProductDetails en en_GB/).length > 0) {
        $('#container').html("<div><h1>Products</h1></div>");
    }
});

Answer 1

我如何修改我的JS以不替换内容，而是首先添加新代码段，然后添加现有内容？

您应该使用.prepend()代替.html()将内容附加为第一元素：

if (body.attr('class').match(/ly_productdetails ProductDetails en en_GB/).length > 0) {
    $('#container').prepend("<div><h1>Products</h1></div>");
}

Answer 2

我永远不会使用这样一种人为的特定于订单的方式。如果您只使用多个hasClass次呼叫，则更容易阅读：

$(function() {    // document ready
    var $body = $(document.body);    // body element

    // If match
    if ($body.hasClass('ly_productdetails') && $body.hasClass("ProductDetails") && $body.hasClass("en") && $body.hasClass("en_GB") {
        $('#container').prepend("<div><h1>Products</h1></div>");
    }
});

由于正则表达式本质上比大多数字符串操作慢，因此速度差异可以忽略不计（并且只在页面加载时发生一次）。

...当然（最后阅读实际问题）您还需要prepend内容而不是替换它：）

使用'match'将内容插入div而不覆盖所有内部HTML

2 个答案: