Calendar Content Query on 3 lines

Question

I have a design requirement based on a custom design created by a UX team to show the 3 most recent calendar entries on 3 separate div elements on a SharePoint 2016 Site Page. Each should only pull one entry using a content query.

I need to show the event name on line 1, the event location on line 2, the event time on line 3. I would like to stay completely client side if possible. I attempted to use jQuery to add a line break after each instance of a character, such as the colon (:)

I tried using the replace method but it repeats the first entry in each div. I then tried the following for each nth-of-type to no avail.

$(document).ready(function(){
    $("div.item a:nth-of-type(1)").html($("div.item a:nth-of- 
   type(1)").html().replace(/:/g, "<br />Location:"));
    });

It continues to repeat the first event on each div instead of showing the other two events. Is this even possible or do I need to create a new XSL? Thanks.

Answer 1

Assuming there is valid justification in your unspecified backstory of why you are reformatting with jQuery instead of using the native XSL in the Content Query:

You should use the jQuery .each() (see jquery docs) method to perform an operation on each selected item. Each instance call of the loop makes the this keyword a reference to the currently selected html element. So, your code would look something like

$(document).ready(function(){
    $("div.item a").each(function () {
        $(this).html($(this).html().replace(/:/g, "<br />Location:"));
    });
});