javascript - 循环通过特定类的控件时无法访问 attr

Question

正在开发 MVC 5 网站。我有一个特定的行，单击该行的按钮，该行及其所有控件都会被克隆。这是克隆的主行...

                <div class="row filter_row">
                    <div class="col-lg-12">
                        <div class="checkbox i-checks">
                            <input type="checkbox" value="">
                        </div>
                        <select data-placeholder="Choose..." class="xchosen-select">
                            <option value="">First Name</option>
                            <option value="">Last Name</option>
                            <option value="">Account</option>
                        </select>
                        <input type="text" placeholder="" class="form-control">
                        <select style="width: 50px; height: 35px;">
                            <option value="">And</option>
                            <option value="">Or</option>
                        </select>
                        <select class="grouping" style="width: 40px; height: 35px;">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>
                </div>

行 div 的添加/克隆效果很好。现在，我想做的就是这个。当我在具有“分组”类的下拉列表中选择一个新项目时，然后将其与以前的“分组”下拉列表进行比较。如果它们相等，则将 div 的背景颜色设置为不同的“交替”颜色。 (基本上这样做的目的是，这是一个高级数据过滤模式，我想对组进行颜色编码。因此，如果前 2 个下拉列表是第 1 组，则背景为白色，第 2 组为交替颜色，第 3 组为白色等等...只是为了美观地帮助用户看到他的行“组”。希望这是有道理的。)

问题是我似乎无法访问类或 id 属性等...作为测试代码，我编写了以下内容:

    $(".grouping").change(function() {
    // loop thru all selecting dropdowns
    $("select option:selected").each(function () {
        alert($(this).attr('id') + '>>>' + $(this).text());
        if ($(this).hasClass('grouping')) {
            // do the comparison, blah blah blah
            alert($(this).val());
        } else { 
            // for debug
            alert('class: ' + $(this).attr('class'));
        }
    });
 });

问题是 attr('id') 和 attr('class') 显示未定义。我可能做错了什么？我相信我正在尝试正确访问这些属性？

其次，对于主循环，当然，它会循环遍历所有选定的下拉列表。我希望它只循环那些具有“分组”类的内容。有没有更有效的方法来实现这一目标？谢谢!

Answer 1

您正在循环遍历所有选定的选项字段。

您需要循环 select 元素。

所以，我认为你只需要更改这一行:

$("select option:selected").each(function () {

对此:

$("select").each(function () {

希望对您有帮助。