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

Question

我正在尝试操作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/>'));

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

我尝试使用each（）函数，但没有成功。在上面的目标参数中使用"this"会破坏它

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

注意：如果知道这一点有帮助的话，那么整个块集也封装在div.sa_widget_content中。

Answer 1

您可以使用回调

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

或环路

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

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

注意，.info不是.sa_widget_sermons_row的直接子级，它们之间有一个.sermon元素，因此删除"直接子级选择器"（>）