CODEWITHSUNDEEP
jquerysyntax
KateTheGreat
KateTheGreat

Reputation: 107

jquery filter : multiple criteria and actions

I have several <label> elements that I have to use jquery to assign classes to dynamically & wondering if there's a condensed/cleaner way to do it than this:

$('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');

Is there a way to fire .filter() once (since I'm searching <label> attributes) something like this:

$('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');
);

or perhaps even cleaner?

Thanks in advance!

Upvotes: 1

Views: 45

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

Instead of .filter() I would suggest .each():

$('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>

Upvotes: 1

Related Questions