ajax加载和冲突的css类和id

Question

我正在构建一个简单的单页应用程序，其中包含一些div，我想从我的wordpress网站的内容填充。

为了做到这一点，我使用ajax加载和插入加载的内容到我的div:

$('#my_div').load("https://example.com/page/")

问题是，我的应用程序使用css从bootstrap这是不同的css从我的wordpress网站。然而，因为类和id是相同的，从加载页面的css将取代从我的应用程序的css。

我怎样才能避免这个问题?我不想使用框架。是否有可能自动重命名导入页面中的每个Class和ID名称，以便它们不冲突?

Answer 1

我认为最好的方法是使用get而不是load，如果可能的话，用replace替换里面的类。在您的情况下，可以这样做:

$.get("https://example.com/page/", function(data) {
// replace classes
$("#my_div").replaceWith(data);
});