CODEWITHSUNDEEP
jquery
SmurfTheSmurf
SmurfTheSmurf

Reputation: 105

jQuery multiple selectors as variables

I need help with jQuery's multiple selectors. I understand how it works and have used it but I need to use it in a way that the element names aren't in the function. (They're being passed as variables due to them being dynamically created)

Here's an example of what I have:

function openBox(row) {
    var rowInfo = '#info' + row;
    var rowClose = '#close' + row;
    var rowNumber = '#number' + row;
    $(rowInfo).slideDown('slow');
    $(rowClose).slideDown('slow');
    $(rowNumber).slideDown('slow');
}

While this is fine and works, I was hoping to clean it up a bit and find use of jQuery's multiple selectors (or something of the kind) but I noticed when passing variables this way, it doesn't seem to work but doesn't throw any errors as to why.

Example of what I want:

function openBox(row) {
    var rowInfo = '#info' + row;
    var rowClose = '#close' + row;
    var rowNumber = '#number' + row;
    $(rowInfo, rowClose, rowNumber).slideDown('slow');
}

Is this possible? Unfortunately their documentation doesn't go into great length about passing anything other than html elements. source

Upvotes: 2

Views: 3314

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

You could also avoid the multiple variable and use an array, which you modify with map and then join with , to create the multiple selectors string for jQuery. So if you need to add more ids in the list you just add them to a single place

function openBox(row) {
    var targets = ['#info', '#close', '#number'].map(v=>v+row).join(',');
    $(targets).slideDown('slow');
}

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074385

You can use a group of selectors:

function openBox(row) {
    var rowInfo = '#info' + row;
    var rowClose = '#close' + row;
    var rowNumber = '#number' + row;
    $(rowInfo + ", " + rowClose + ", " + rowNumber).slideDown('slow');
}

or the add method:

function openBox(row) {
    var rowInfo = '#info' + row;
    var rowClose = '#close' + row;
    var rowNumber = '#number' + row;
    $(rowInfo)
        .add(rowClose)
        .add(rowNumber)
        .slideDown('slow');
}

Both can be more concise, of course:

function openBox(row) {
    $('#info' + row + ", #close" + row + ", #number" + row).slideDown('slow');
}

or the add method:

function openBox(row) {
    $('#info' + row)
        .add('#close' + row)
        .add('#number' + row)
        .slideDown('slow');
}

But perhaps it would make sense to give all of these elements a common class based on the row?

<div id="infoX" class="rowX">...</div>
<div id="closeX" class="rowX">...</div>
<div id="numberX" class="rowX">...</div>

Then it would be:

function openBox(row) {
    $(".row" + row).slideDown("slow");
}

Upvotes: 4

Satpal
Satpal

Reputation: 133403

You can concatenate strings to create a selector string; 

var selector = [rowInfo, rowClose, rowNumber].join(',');
$(selector).slideDown('slow');

Or, You can use .add() to group then in a jQuery object

 $(rowInfo).add(rowClose).add(rowNumber).slideDown('slow');

Upvotes: 5

Related Questions