How do I Use Collection List to emit clean HTML?

Design help Custom code
1

Many areas of functionality in Webflow have to be added via external jQuery libraries, etc, however it seems difficult to generate the clean HTML & JS needed for these elements.

As an example, I have a custom jQuery slider for product-selection, in which I need to emit a collection of <div>'s from the CMS. e.g.;

<div> MY CMS CONTENT DIV 1 </div>
<div> MY CMS CONTENT DIV 2 </div>

Using Webflow’s Collection List component, with an HTML Embed Component, this seems very straightforward, however, I get a lot of extraneous DIVs that break the jQuery component…

<div class="w-dyn-list"><div class="w-dyn-items">
<div class="w-dyn-item"><div class="w-embed">
<div> MY CMS CONTENT DIV 1 </div>
</div></div>
<div class="w-dyn-item"><div class="w-embed">
<div> MY CMS CONTENT DIV 2 </div>
</div></div>
</div></div>

How can I generate basic CMS content into the website using only the HTML structure I define in the HTML Embeds?

Or, if there is no way to generate “clean” HTML, how do I discard all of those Webflow-generated DIVs before the jQuery component executes?

Thanks heaps!

2 Likes
2

Incidentally I’ve discovered the jQuery unwrap() method and hacked up a bit of cleanup code, which executes before the slider jQuery instantiates. This seems to effectively eliminate the 4 DIV wrappers that the Collection List generates. Is there a cleaner way?

In my example, my outer DIV representing the slider has an ID of owl-demo, and my innermost slides are DIVs with a class of item, so I am attempting to find and unwrap the Webflow Collection List-generated DIVs layer-by-layer.

$("#owl-demo .w-embed div.item").unwrap();
$("#owl-demo .w-dyn-item div.item").unwrap();
$("#owl-demo .w-dyn-items div.item").unwrap();
$("#owl-demo .w-dyn-list div.item").unwrap();

Thanks again.