如何使用带变量的 jQuery 选择器？

Question

I have seen lots of similar questions, but none of answers worked in my case.

A variable is set depending on a document width:

if ($(document).width() < 1400) {
    var tblProdukty = document.getElementById('tblProdukty1280');
}
else {
    var tblProdukty = document.getElementById('tblProdukty1920');
}

Then I would like to do something like this: $("#tblProdukty1280 > tbody").empty(); but with a variable set as above into something like this:

$("#" + tblProdukty + " > tbody").empty();

or

$(`${tblProdukty}` + " > tbody").empty();

I have tried different combinations of concatenation and injection and could not figure it out. I got the following error message: Uncaught Error: Syntax error, unrecognized expression: #[object HTMLTableElement] > tbody

Can you please advice on this?

Answer 1

You can do it in 2 different ways:

first, you can use the tblProdukty variable as reference to the element:

if ($(document).width() < 1400) {
    var tblProdukty = $("#tblProdukty1280");
}
else {
    var tblProdukty = $("#tblProdukty1920"); 
}

Then use it this way:

tblProdukty.find("tbody").empty();

OR you can do something like that:

if ($(document).width() < 1400) {
    var tblProdukty = "tblProdukty1280";
}
else {
    var tblProdukty = "tblProdukty1920";
}

Then use it this way:

$(`#${tblProdukty}` + " > tbody").empty();