Javascript jQuery如何筛选具有特定数据属性的元素

我有一张表格，格式如下：

<table data-type="costTable">
    <thead>...</thead>
    <tbody>
        <tr data-grouping='category' data-category='A'>...</tr>
        <tr data-grouping='subCategory' data-category='A'>...</tr>
        <tr data-grouping='subCategory' data-category='A'>...</tr>
        ...
        <tr data-grouping='category' data-category='B'>...</tr>
        <tr data-grouping='subCategory' data-category='B'>...</tr>
        <tr data-grouping='subCategory' data-category='B'>...</tr>
        ...            
    </tbody>
</table>

}))

我在浏览器中进行了一些调试，问题如下：

var targettedElements = subCategoryRows.filter("[data-category=categoryName]");

单击类别行a时，它应该会找到包含数据类别a的子类别行，但找不到任何内容。注意，当我检查targetDelete时，它显示

r.fn.init [prevObject: r.fn.init(30)]

---

我还尝试了.has函数而不是.filter，但这不会对返回值进行任何更改。请注意，当我在categoryName中硬编码一个类别名称时，它会返回正确的元素。因此，即使categoryName在控制台中显示为字符串，它也不会被替换为字符串。知道如何解决这个问题吗？

这只是一个字符串，不能将其用作变量

.filter("[data-category=categoryName]");

基本字符串连接

.filter('[data-category="' + categoryName + '"]');

---

如果您希望使用jQuery的

过滤器

功能，请转到的答案。 否则，下面是一个使用vanilla

filter

函数的示例

您可以将jquery行作为数组，并使用

filter

函数过滤掉不需要的行
请注意，为了简单起见，我只复制了一些代码行，但行为是相同的

//我们使用数组，以便以后能够使用filter函数。
var subCategory行=$（“表[data type='costTable']tr[data grouping='subCategory']）。toArray（）；
变量categoryName='B'；
var targetDeletes=子类别行。筛选器（（行）=>{
//将当前行数据与“单击”类别进行比较。
返回$（行）.data（'category'）==categoryName；
});
//我们的最终targetDeletes数组现在长度为2；
控制台.log（targetdelements.length）

...
...
...
...
...
...
...           
您是否试图在此处使用变量
categoryName
“[data category=categoryName]”？您有一个字符串。筛选器（“[data category=categoryName]”）；不是一个变量
.filter('[data-category="' + categoryName + '"]');