jquery 过滤器：多个条件和操作答案

【问题标题】：jquery filter : multiple criteria and actionsjquery 过滤器：多个条件和操作
【发布时间】：2018-09-15 18:51:53
【问题描述】：

我有几个 <label> 元素，我必须使用 jquery 来动态分配类并想知道是否有比这更简洁/更简洁的方法：

$('label').filter(function()
{return $.trim($(this).text()) === "Text A:";}
).closest('div').addClass('labeltextaclass');

$('label').filter(function()
{return $.trim($(this).text()) === "Text B:";}
).closest('div').addClass('labeltextbclass');

$('label').filter(function()
{return $.trim($(this).text()) === "Text C:";}
).closest('div').addClass('labeltextcclass');

有没有办法触发.filter() 一次（因为我正在搜索<label> 属性）是这样的：

$('label').filter(function() 
(
{return $.trim($(this).text()) === "Text A:";}).closest('div').addClass('textAclass');
{return $.trim($(this).text()) === "Text B:";}).closest('div').addClass('textBclass');
{return $.trim($(this).text()) === "Text C:";}).closest('div').addClass('textCclass');
);

或者甚至更清洁？

提前致谢！

【问题讨论】：

$('label').filter(() => {var txt = $.trim($(this).text());return txt === "Text A:" | |txt === "文本 B:" || txt === "文本 C:";}).closest('div').addClass('labeltextaclass');
嗨，如果我将 labeltextaclass 分配给所有内容，那将完全有效，但我必须根据标签文本分配特定/唯一的类。更新了我的帖子以使类名差异更加明显

标签： jquery syntax

【解决方案1】：

我建议使用.each()，而不是.filter()：

$('div label').each(function (idx, ele) {
    switch (ele.textContent.trim()) {
        case 'Text A:':
            $(ele).closest('div').addClass('labeltextaclass1');
            break;
        case 'Text B:':
            $(ele).closest('div').addClass('labeltextaclass2');
            break;
        case 'Text C:':
            $(ele).closest('div').addClass('labeltextaclass3');
            break;
    }
});

div {
    width: 100px;
    height: 100px;
    border-style: solid;
    display: inline-flex;
}

.labeltextaclass1 {
    color: blue;
}

.labeltextaclass2 {
    color: red;
}

.labeltextaclass3 {
    color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
    <label>Text A:</label>
</div>
<div>
    <label>Text B:</label>
</div>
<div>
    <label>Text C:</label>
</div>

【讨论】：