如何查询动态声明的类名？循环中动态类名无括号查询方法

嘿，我来帮你搞定这两个关于动态类名的问题，结合你的代码给你详细说明：

一、如何查询动态声明的类名 #

你已经把动态生成的类名存在className变量里了，要查询这个类对应的DOM元素，只需要把变量和类选择器的.拼接起来，用jQuery选择器就能直接选中：

// 用存储的类名字符串查询元素
var className = 'row' + i;
var targetRows = $('.' + className);

这里的.是CSS类选择器的标识，和变量拼接后就成了合法的选择器，能精准定位到对应类的元素。

二、for循环中动态初始化类名并查询（无需额外括号） #

看你的代码，已经在循环里给<tr>添加了row+i的动态类，要查询这个类的元素，其实很简单，不用额外括号，直接拼接选择器或者用变量就行。我给你优化了代码，顺便修正了一个小bug（你原来写的$("drawing-area")少了.，应该是$(".drawing-area")，不然会当成标签名查找，找不到目标容器）：

优化后的完整代码 #

$("#grid-input").click(function() { 
    $(".drawing-area").empty(); 
    var rows = $("#row").val(); 
    var cols = $("#col").val(); 
    if (rows > 0 && cols > 0) { 
        for (var i = 1; i <= rows; i++) { 
            // 动态创建tr并添加类，同时把元素存到变量里（后续操作更高效）
            var $newRow = $("<tr>").addClass('row' + i).appendTo(".drawing-area");
            
            // 方式1：直接拼接类名查询（无需额外变量）
            var $currentRow = $('.row' + i);
            
            // 方式2：用存储的类名字符串查询
            var className = 'row' + i;
            var $currentRow2 = $('.' + className);
            
            // 循环添加列的示例（补全你没写完的部分）
            for (var j = 1; j <= cols; j++) {
                $("<td>").appendTo($newRow).addClass('col' + j);
            }
        }
    }
});

几个关键要点 #

• 刚创建的元素其实不需要再用选择器查询，直接把创建的元素存在变量（比如$newRow）里，后续操作这个变量比重新查找DOM要高效得多。
• 如果一定要通过类名查询，不管元素是不是刚创建的，只要把类名变量和.拼接成合法的jQuery选择器字符串就行，完全不需要额外的括号，$('.' + className)就是正确的写法。
• 要是想批量查询所有动态生成的row*类元素，可以用属性选择器：

// 选中所有class以"row"开头的元素
var allDynamicRows = $('[class^="row"]');

不过要注意，如果元素有多个类，其中一个以row开头也会被选中，要是需要更精准的匹配，可以结合其他条件。

内容的提问来源于stack exchange，提问作者Gaurav Thantry