Manipulating inner html with string methods then placing it in pages that have repetitive data

0 Views

I am trying to manipulate the content generated by a WordPress plugin so that it matches the styling for the rest of my site. Each block of data (of which there are 30 blocks on a page) has a number of tags with various class names .
Here is an example: 

<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...

If I use something like the following jQuery:

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

…it replaces the | but it puts the same data (the first set) in every div.info.

I tried using an each() function to no avail. And using ‘this’ in the above target argument breaks it.

How do I get it to retrieve the inner html, manipulate it, and put it back in the same place?

Note: if it is helpful to know – the entire set of blocks is wrapped in div.sa_widget_content as well.

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. You can use a callback

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

    or a loop

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

    to target each element, not all of them at once.

    Note that .info is not a direct child of .sa_widget_sermons_row, there’s a .sermon element between them so remove the “direct child selector” (>)