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元素，因此请删除“直接子选择器”（>）

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

1 个答案: