Calendar Content Query on 3 lines
-
08-02-2021 - |
题
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.
解决方案
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:"));
});
});