如何将两个含选择器的变量传入jQuery的$()函数

原工作代码：

$(".field--name-field-upload-artwork details table, .field--name-field-upload-artwork .js-form-type-managed-file").wrapAll('<div class="upload-file-wrapper"></div>');

我将选择器对应的jQuery对象存入变量：

let $uploadedFilesTable = $(".field--name-field-upload-artwork details table");
let $dragAndDrop = $(".field--name-field-upload-artwork .js-form-type-managed-file");

但以下两种写法均无法正常运行：

$(${$uploadedFilesTable} + ',' + ${$dragAndDrop}).wrapAll('<div class="upload-file-wrapper"></div>');

$($uploadFilesTable + ',' + $dragAndDrop).wrapAll('<div class="upload-file-wrapper"></div>');

请问如何正确将这两个jQuery对象传入$()函数并调用wrapAll？

方法一：用jQuery的add()方法合并对象 #

这是最简便的方式，你已经有了两个现成的jQuery对象，直接用add()把它们合并成一个新的jQuery对象，再调用wrapAll即可：

$uploadedFilesTable.add($dragAndDrop).wrapAll('<div class="upload-file-wrapper"></div>');

方法二：通过数组合并DOM元素后传入$() #

jQuery支持接收DOM元素数组作为参数，你可以先把两个jQuery对象里的DOM元素提取出来合并成数组，再传给$()：

// 适合每个变量只匹配一个元素的场景
$([$uploadedFilesTable[0], $dragAndDrop[0]]).wrapAll('<div class="upload-file-wrapper"></div>');

// 适合变量匹配多个元素的场景
$($uploadedFilesTable.get().concat($dragAndDrop.get())).wrapAll('<div class="upload-file-wrapper"></div>');

方法三：变量存储选择器字符串而非jQuery对象 #

如果你想保留字符串拼接的思路，那变量应该存选择器字符串，而不是实例化后的jQuery对象：

let uploadedFilesTableSelector = ".field--name-field-upload-artwork details table";
let dragAndDropSelector = ".field--name-field-upload-artwork .js-form-type-managed-file";
$(uploadedFilesTableSelector + ',' + dragAndDropSelector).wrapAll('<div class="upload-file-wrapper"></div>');

为什么之前的写法无效？ #

你之前的错误在于把已经实例化的jQuery对象当成字符串去拼接，得到的结果是[object Object],[object Object]——这显然不是有效的CSS选择器，jQuery无法解析，所以执行失败。

内容的提问来源于stack exchange，提问作者nathan111777