I am working with web components. What is the equivalent of the following code in jquery?
const horizontalMasonry = document.createElement('test-horizontal-masonry');
horizontalMasonry.items = [
{
id: `0`,
url: "https://homepages.cae.wisc.edu/~ece533/images/watch.png",
isPremium: false,
alt: 'Thumbnail'
},
{
id: `1`,
url: "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
isPremium: true,
alt: 'Thumbnail'
},
{
id: `2`,
url: "https://homepages.cae.wisc.edu/~ece533/images/cat.png",
isPremium: true,
alt: 'Thumbnail'
}
];
horizontalMasonry.addEventListener('THUMBNAIL_CLICK_EVENT', () => {
// e.detail.item
});
document.body.appendChild(horizontalMasonry);
I tried
$masonry = $('<theo-horizontal-masonry rows="1"></theo-horizontal-masonry>');
$masonry.items = items;
$masonry.width = 256;
$masonry.height = 100;
$carousel.append($masonry);
but the element is not retaining the properties items, width, height.
You are setting things to the jQuery object, not the element itself. You should be using attr() or prop() to change the DOM element.
$masonry.attr('items', items);
// or
$masonry.prop('items', items);