Jquery 使用字符串方法处理内部html，然后将其放置在具有重复数据的页面中

我试图操纵WordPress插件生成的内容，使其与我网站其余部分的样式相匹配。每个数据块（页面上有30个数据块）都有许多具有不同类名的标记。
以下是一个例子：

<div class="sa_widget_sermons_row">
    <div class="sermon">
        <div class="sa_widget_title">
            Title_text
        </div>
        <div class="info">
            Speaker_Name, Date&nbsp;|&nbsp;Series&nbsp;|&nbsp;Topic
        </div>
    </div>
</div>
...repeat again for the next set of data...

标题和文本
演讲者|姓名、日期|系列|主题
…对下一组数据再次重复此操作。。。

如果我使用类似以下jQuery的内容：

$('.sa_widget_sermons_row > .info').html($('.sa_widget_sermons_row > .info').html().replace(/\|/g, '<br/>'));

$（'.sa\u widget\u sermons\u row>.info'）.html（$（'.sa\u widget\u sermons\u row>.info'）.html（）。替换（/\\/g，
'）；

…它替换了|，但在每个div.info中都放置了相同的数据（第一组）

我尝试使用each（）函数，但没有效果。在上述目标参数中使用“this”会破坏它

如何让它检索内部html，对其进行操作，并将其放回原来的位置

注意：如果有助于了解-整个块集也包装在div.sa_widget_内容中。

您可以使用回调

$('.sa_widget_sermons_row .info').html(function(_, html) {
    return html.replace(/\|/g, '<br/>');
});

$（'.sa_widget_sermons_row.info'）.html（函数（u，html）{
返回html.replace（/\\\；/g，
）；
});

还是一个循环

$('.sa_widget_sermons_row .info').each(function() {
    $(this).html( $(this).html().replace(/\|/g, '<br/>') );
});

$（'.sa\u widget\u sermons\u row.info'）。每个（函数（）{
$（this.html（$（this.html（）.replace（/\ |/g，“
”）；
});

以针对每个元素，而不是同时针对所有元素

---

请注意，

.info

不是

.sa\u widget\u sermons\u row

的直接子元素，它们之间有一个

.sermon

元素，因此请删除执行此操作的“直接子选择器”（

）

。我尝试了您提供的后一种解决方案，但我想我尝试了使用replaceWith（）而不是您所做的。使用一个比另一个有什么好处吗？我更喜欢回调，但实际上它们几乎一样，你不会注意到任何区别。对我来说，循环更可读……但我几乎没有使用jQuery。