How to pass two variables with selectors to $()

Question

There is this code:

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

But I decided to add selectors to variables:

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

Like this doesn't work:

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

And like this doesn't work:

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

perhaps [$uploadedFilesTable, $dragAndDrop].forEach($elem => $elem.wrap('<div class="upload-file-wrapper"></div>') — mplungjan
– mplungjan, Commented May 9, 2023 at 9:35
It doesn't work because they're jQuery objects, not strings. You can .add() them: Merging jQuery objects — Álvaro González
– Álvaro González, Commented May 9, 2023 at 11:03
"But I decided to add selectors to variables" - If that was you intention, you didn't. Perhaps you meant let uploadedFilesTable = ".field--name-field-upload-artwork details table";? — Álvaro González
– Álvaro González, Commented May 9, 2023 at 12:28
let uploadedFilesTable = '.field--name-field-upload-artwork details table', dragAndDrop = 'field--name-field-upload-artwork .js-form-type-managed-file'; $(uploadedFilesTable + ', ' + dragAndDrop).wrapAll('<div class="upload-file-wrapper"></div>'); — Beneris
– Beneris, Commented May 9, 2023 at 12:35

sanjiv sutar · Accepted Answer · 2023-05-09 16:09:50Z

Here is a working Example how to use multiple variables in a selector. Check the below-working code snippet.

Hope this will solve your query.

 $(document).ready(function(){ let $uploadedFilesTable = $(".field--name-field-upload-artwork .details"); let $dragAndDrop = $(".field--name-field-upload-artwork .js-form-type-managed-file"); $($dragAndDrop).add($uploadedFilesTable).wrapAll('<div class="upload-file-wrapper">file wrapper</div>') })

.field--name-field-upload-artwork{ background:#eaeaea; padding:10px; } .field--name-field-upload-artwork .details{ background:blue; padding:10px; } .field--name-field-upload-artwork .js-form-type-managed-file{ background:red; padding:10px; } .field--name-field-upload-artwork .upload-file-wrapper{ background:yellow; padding:10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="field--name-field-upload-artwork"> main container <div class="details"> Details </div> <div class="js-form-type-managed-file"> js-form-type-managed-file </div> </div>

Collectives™ on Stack Overflow

How to pass two variables with selectors to $()

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related