Javascript 使用jQuery进行选择选项循环时出现的问题

我使用jQuery循环遍历许多selectoptionhtml元素，我可以让它一次运行一个，但是如果数据存储在jQuery元素中，我就很难访问它

例如，我有两个selecthtml元素

var-lList=$（“.p1_-lSelect”）

var rList=$（“.p1_rSelect”）

我可以通过以下方法获得所需的输出

$(".p1_lSelect option:selected").each(function() {
    selected = $(this).text(); //selected == "p1_lSelect_Data"
    console.log(selected);
});

$(".p1_rSelect option:selected").each(function() {
    selected = $(this).text(); //selected == "p1_rSelect_Data"
    console.log(selected);
});

//Console logs .p1_lSelect_Data and .p1_rSelect_Data as expected

我想要的是类似于下面的东西，这样我就可以更改我要输入到循环中的列表

function foo(){
    var lList = $(".p1_lSelect");
    var rList = $(".p1_rSelect");
    bar(lList);
    bar(rList);
}

function bar(list){
    $("list option:selected").each(function() {
        selected = $(this).text();
        console.log(selected);
    });
    //Console log does not print
}

如何执行此操作？
您可以传递列表名称并将其附加到选择器，如下所示：

function foo(){
    bar("p1_lSelect");
    bar("p1_rSelect");
}

function bar(list){
    $(`.${list} option:selected`).each(function() {
        selected = $(this).text();
        console.log(selected);
    });
    //Console log does not print
}

您可以传递列表的名称并将其附加到选择器，如下所示：

function foo(){
    bar("p1_lSelect");
    bar("p1_rSelect");
}

function bar(list){
    $(`.${list} option:selected`).each(function() {
        selected = $(this).text();
        console.log(selected);
    });
    //Console log does not print
}

使用
find（）
方法：

function bar(list) {
    list.find("option:selected").each(function() {
        console.log($(this).text());
    });
});

使用
find（）
方法：

function bar(list) {
    list.find("option:selected").each(function() {
        console.log($(this).text());
    });
});

请根据您的结构尝试以下代码：

function foo(){
    var lList = $(".p1_lSelect");
    var rList = $(".p1_rSelect");
    bar(lList);
    bar(rList);
}

function bar(list){
    $(list).find("option:selected").each(function() {
        selected = $(this).text();
        console.log(selected);
    });
    //Console log does not print
}

请根据您的结构尝试以下代码：

function foo(){
    var lList = $(".p1_lSelect");
    var rList = $(".p1_rSelect");
    bar(lList);
    bar(rList);
}

function bar(list){
    $(list).find("option:selected").each(function() {
        selected = $(this).text();
        console.log(selected);
    });
    //Console log does not print
}

我来试一试，你能告诉我你在这里使用的花括号在jQuery中叫什么吗，我想进一步了解它是如何工作的谢谢你，我来试一试，你能告诉我你在这里使用的花括号在jQuery中叫什么吗，我想更多地了解它是如何工作的谢谢大家，我也会尝试一下，看起来在这里更容易实现。使用@Majed Badawi建议的模板文字而不是find方法会有什么直接的好处吗？可以使用children（）方法而不是find（）方法。在本例中，list参数是object，因此我认为如果要传递对象参数，就不能使用模板文字。如果要使用模板文字，您必须像@Majed一样将类名作为函数栏的参数来传递。好吧，在这种特殊情况下，find方法工作得很好，听起来似乎麻烦多了。我对模板文本一无所知，所以在此期间，我将不得不仔细阅读它们。谢谢你的回答！我也会尝试一下，看起来在这里更容易实现。使用@Majed Badawi建议的模板文字而不是find方法会有什么直接的好处吗？可以使用children（）方法而不是find（）方法。在本例中，list参数是object，因此我认为如果要传递对象参数，就不能使用模板文字。如果要使用模板文字，您必须像@Majed一样将类名作为函数栏的参数来传递。好吧，在这种特殊情况下，find方法工作得很好，听起来似乎麻烦多了。我对模板文本一无所知，所以在此期间，我将不得不仔细阅读它们。谢谢你的回答！