页面加载后更改 HTML 代码（使用 jQuery？）
Posted
技术标签:
【中文标题】页面加载后更改 HTML 代码（使用 jQuery？）【英文标题】：Change HTML code after page load (w/ jQuery ?) 【发布时间】：2021-07-29 14:33:04 【问题描述】：我正在尝试找到一种方法来修改html 代码以将每个 Bootstrap col 类名称（col、col-xs-x、col-x 等）替换为col-12 页面加载后。
我可以用.removeClass('name') 和.addClass('name') 做到这一点，但我需要使用一些正则表达式，因为我想修改 Bootstrap col 类名。
来自这样的事情：
<body>
<div class="col-xs-6 col-sm-4 col-2"> Content 1 </div>
<div class="col"> Content 2 </div>
</body>
我想修改成这样：
<body>
<div class="col-12"> Content 1 </div> <!--can even be class="col-12 col-12 col-12"-->
<div class="col-12"> Content 2 </div>
</body>
我在这里发现有人在 jQuery 中使用 html().replace 执行此操作，因此我尝试执行相同操作，但它不起作用。
像这样：
$(document).ready(function () // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]0,2)?(\-)?([0-9]0,2)?/i, 'col-12')
$('body').html(col_let_num)
)
所以我的问题是，您有什么解决方案可以在页面加载后更改 HTML 内容吗？
【问题讨论】：
我认为您没有正确使用引导程序，如果您正确使用引导程序断点类，则不需要删除它们。 添加引导标记，以便引导专家可以介入。我建议解释问题是什么以及您要达到的目标，而不是询问如何大规模更新 HTML 另外$('body').html() 是一件很糟糕的事情......
是的，但我找不到使用 RegEx 更改这些类名的方法。事实是，如果人们选中一个框，我希望整个列都是 col-12。清楚吗？
有道理，我建议在问题中添加这个用例，使用引导实用程序类可能会有一个聪明的答案
【参考方案1】：
您忘记在 javascript 中添加 ')'。 但我真的无法意识到你在这里想要做什么。 任何方式
$(document).ready(function () // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]0,2)?(\-)?([0-9]0,2)?/i, 'col-12')
$('body').html(col_let_num)
)
已编辑 给你
$('[class*="col"]').each((i, e) =>
let classes = $(e).attr('class').split(/\s+/);
classes.forEach(v =>
let col_let_num = v.replace(/\bcol\b(\-[a-z]0,2)?(\-)?([0-9]0,2)?/i, 'col-12')
$(e).attr('class', col_let_num)
)
)
这应该可以。
【讨论】：
谢谢，我加了。我想要一种用 col-12 替换每个 Bootstrap col 类名的方法。 @Kiji_T 用正确的方法编辑了答案。 :) 它似乎工作，但我有一个疑问，我认为它删除了我一些 。可能吗 ？ （我在看） @Kiji_T 嗯，不。尝试输出div，看看代码console.log($('div').length)之前和之后是否有任何变化。
没关系，你只是个神。谢谢你。我想知道你为什么在函数中添加 i、e 和 v。你能告诉我为什么不使用 $(this) 吗？以上是关于页面加载后更改 HTML 代码（使用 jQuery？）的主要内容，如果未能解决你的问题，请参考以下文章
在gridview页面更改后Jquery colorbox不起作用
jQuery 是如何判断HTML页面加载完毕的？它的原理是啥?