0

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.

9
  • are you looking for $masonry.attr('items', items) ?
    – Gert B.
    Oct 22, 2021 at 12:34
  • 1
    And why are you trying to convert existing JS code to jQuery? In general, people tend to do the opposite and get rid of jQuery by converting existing jQuery code to vanilla JS Oct 22, 2021 at 12:35
  • @JeremyThille I was thinking the same
    – Gert B.
    Oct 22, 2021 at 12:36
  • @JeremyThille Why not? People can still prefer the jQuery library despite the fact that javascript gets more similar functionalities. It's better to stick to one style then to mix them up in my opinion. Oct 22, 2021 at 12:40
  • 1
    if you want to create custom properties like that, you would have to do it on the native js object (eg $masonry[0].items = ... - you can't add extra properties to a jquery object
    – Pete
    Oct 22, 2021 at 13:00

1 Answer 1

-1

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);

Not the answer you're looking for? Browse other questions tagged or ask your own question.