1

I'm trying to initialize ClipboardJS with a list of elements I got from JQuery:

var elems = someJQueryObject.find("someSelector");
new ClipboardJS(elems);

This doesn't work:

First argument must be a String, HTMLElement, HTMLCollection, or NodeList

I tried to rewrite the first line like so:

var elems = someJQueryObject.find("someSelector").get();

But I still get the same error.

In contrast, using JavaScript native functions:

var elems = document.querySelectorAll("someSelector");
new ClipboardJS(elems);

works. So my question is: how to get the same return type as querySelectorAll returns from a jQuery object? Why doesn't .get() work? According to docs it should do exactly this.

D.R.
  • 20,268
  • 21
  • 102
  • 205
  • 2
    _“Why doesn't .get() work?”_ - because it returns an _array_, as the documentation clearly states …? – CBroe May 12 '20 at 09:57
  • How to convert an array of elements into a NodeList or an HTMLCollection? Those two are accepted by ClipboardJS – D.R. May 12 '20 at 09:58
  • 1
    With difficulty. Why not just use native selector methods? – Mitya May 12 '20 at 09:59
  • @Utkanos: It would be very weird to have jQuery everywehre in the project but this single occurrence. It would break the symmetry. – D.R. May 12 '20 at 10:00
  • Well, sure, but what you're asking isn't possible. jQuery stores element sets as array-like objects, and `get()` returns an array. If the Clipboard thing you're working with doesn't accept either of these, why bang your head against a wall? – Mitya May 12 '20 at 10:01
  • I didn't know that it isn't possible. One comment ago you wrote "with difficulty". – D.R. May 12 '20 at 10:03
  • 1
    `elems.each((i,e)=>new ClipboardJS(e));` – freedomn-m May 12 '20 at 10:05
  • https://stackoverflow.com/questions/13351966/ has several approaches to try and “generate” a NodeList - most of which appear to insert the elements in question into the DOM, to then retreive them again by calling a method that _does_ return a NL … if any of those seem more appealing to you, than writing a single line of non-jQuery code somewhere, feel free to give them a go :-) – CBroe May 12 '20 at 10:07
  • Also note that the `elems` parameter in `JSClipboard(elems)` *is* a selector, so no need to use "native selector methods (to generate a nodelist)" just put the selector in the JSClipboard. Of course this isn't the equivalent, just an possible alternative. – freedomn-m May 12 '20 at 10:11
  • @CBroe: If it's really that hard, it's indeed better in our scenario to use the native function. I'm just wondering why this isn't a oneliner that jQuery provides... – D.R. May 12 '20 at 10:25
  • @freedomn-m: But there is no context parameter, so I can't perform what I've shown in my question. – D.R. May 12 '20 at 10:25
  • If your context is a single element, then you can just call `querySelectorAll` on that to begin with. If you need a more complex context - then you can still go with the jQuery variant, use `.get()` to get it as an array, and _then_ do what @freedomn-m suggested with that. – CBroe May 12 '20 at 10:32
  • @D.R. I pre-empted you saying that by adding "this isn't the equivalent" – freedomn-m May 12 '20 at 10:35
  • @CBroe there's no need to convert to an array/get - iterate over the jquery object using `.each((i,domElement) =>` passes the DOM element inside the each – freedomn-m May 12 '20 at 10:53
  • 1
    **tl;dr summary:** ClipboardJS is not a jquery component, so won't ever understand jquery objects. A quick google/SO search confirms you can't (*sensibly*) create a NodeList or HTMLCollection (so can't convert jquery object to one of these). So the only solution is to iterate your jquery object and call ClipboardJS for each DOM node; which clipboardJS does internally if you pass a collection anyway. – freedomn-m May 12 '20 at 10:53

0 Answers0