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.

Chris Hansen
  • 7,813
  • 15
  • 81
  • 165
  • are you looking for `$masonry.attr('items', items)` ? – Gert B. Oct 22 '21 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 – Jeremy Thille Oct 22 '21 at 12:35
  • @JeremyThille I was thinking the same – Gert B. Oct 22 '21 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. – Mark Baijens Oct 22 '21 at 12:40
  • @MarkBaijens I agree that you should stick to one style, but I think, with the current functionalities available, it would be better to stay with vanilla js rather than switching to jQuery. jQuery is an extra library to load. But indeed. thats an opinion. – Gert B. Oct 22 '21 at 12:50
  • Do you know lit html? I'm trying to add the items, width, and height properties to the element, but jquery is not recognizing it. These are web components. – Chris Hansen Oct 22 '21 at 12:51
  • you are setting things to the jQuery object, not the DOM element – epascarello Oct 22 '21 at 12:58
  • @epascarello how should I fix it then? – Chris Hansen Oct 22 '21 at 12:59
  • 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 '21 at 13:00

1 Answers1

-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);
epascarello
  • 204,599
  • 20
  • 195
  • 236