London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!
AI OnAI Off
Iterating over XhtmlString elements and adding an ID to them
Here's a blog post about extending XhtmlString and parsing/updating the output content -- different goals, but could be one approach for you:
Aug 01, 2023 17:33
Might be easier to do client side?
$( document ).ready(function() {
// Get the main body and look for h2
var countItems = 0;
$('#mainBody').find('h2').each(function () {
// don't show h2 that editors have said to hide
if(!$(this).hasClass('hideFromAuto')){
// add a uniquie id for anchor
$(this).attr('id', 'autoAnchor' + countItems);
// add the on this page link
$('#anchorItems').append('<li><a href="#autoAnchor' + countItems + '">' + $(this).text() + '</a></li>');
countItems++;
}
});
if (countItems > 0) {
// if we found items show the on this page section
$("#anchor-links").removeClass('is-hidden');
}
});
Aug 04, 2023 0:16
Laurent
- Aug 04, 2023 6:28
Thanks Paul! I ended up doing it in the client side with plain JavaScript since I could not make a service for it. I was afraid that doing it that way would affect the cumulative layout shift (and generally I try to avoid using JS ¯\_(ツ)_/¯), but apparently is does not.
Normally, if you want to render the contents of a XhtmlString then we can just write the code below. Hovever, I need to iterate through the contents of a XhtmlString and add an ID to all <h2 tags>