jQuery

Question

I want to create a jQuery where if a certain text appears, then it will add a class.

Check my jsfiddle: http://jsfiddle.net/uREUT/130/

I have removed all other sentences to make it work all the time, but I want the class to be added if the word "mener" is in the div

var sentences = [
    'Jeg mener også at det er paent'];

var rand = sentences[Math.floor(Math.random() * sentences.length)];

$(document).ready(function () {
    $('#text').text(rand); {
        $("#text:contains('MENER')").addClass("#flaekke");
    }
});

.flaekke {
    background: #000;
    width: 200px;
    height: 200px;
}
#text {
    margin: 20px auto;
    width: 80%;
    font-size: 200%;
    text-align: center;
    z-index: 10;
    color: #000;
    text-transform:uppercase;
}

note: you're adding a class with a # in the class name, which is probably not going to work. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Dec 4, 2013 at 22:54
:contains is case sensitive (det er forskjell på store og små bokstaver) — adeneo
– adeneo, Commented Dec 4, 2013 at 22:56
@elclanrs. That would still work as it would consider it as a block — Sushanth --
– Sushanth --, Commented Dec 4, 2013 at 22:57
I'm not saying it wouldn't work, but it doesn't look right, obviously something went wrong. — elclanrs
– elclanrs, Commented Dec 4, 2013 at 22:58

keeehlan · Accepted Answer · 2013-12-04 23:04:46Z

2

Remove the hash (#) from the class name. It also doesn't take much code to add a class to elements containing text.

This is all you should need:

var sentences = [
    'Jeg mener også at det er paent'];

var rand = sentences[Math.floor(Math.random() * sentences.length)];

$(document).ready(function () {
    $("#text").text(rand);

    $("#text:contains('MENER'), #text:contains('mener')").addClass("flaekke");
});

Here's a fiddle.

edited Dec 4, 2013 at 23:04

answered Dec 4, 2013 at 22:55

keeehlan

8,06416 gold badges61 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Münter Over a year ago

didn't work. tried to remove the hash and also tried to add dot. didn't work either time

adeneo Over a year ago

Wouldn't chaining selectors like that first match MENER, then try to match mener

keeehlan Over a year ago

@Münter I updated the fiddle. It adds the class and sets the text, but it does look really weird to me.

jfriend00 · Accepted Answer · 2013-12-04 23:03:26Z

I made these changes to your code to make it work:

Look for the string in the text you already have, not in the DOM (simpler and faster).
Remove the # from the class name
Make sure you're looking for the right case. The actual "mener" text is lower case even though you have a text-transform to display it in upper case.
Make sure your CSS priorities are correct. I had to move the .flaekke rules after the #text rules and add one !important to make sure the desired `.flaekke rules took effect when I wanted them to. Remember, a CSS rule specified by ID has higher precedence than a class so if you want the class to have priority, you have to modify the rule to make that happen.

It seems that you can just check for the word on the text you already have - you don't have to look in the DOM. Also, you need to remove the # from your class name:

$(document).ready(function () {
    $('#text').text(rand);
    if (rand.indexOf("mener") !== -1) {
        $('#text').addClass("flaekke");
    }
});

Working demo: http://jsfiddle.net/jfriend00/s5FCL/

Rooster · Accepted Answer · 2013-12-04 23:13:36Z

0

regular expressions are fun so heres an answer that uses them:

JS FIDDLE

var sentences = [
    'Jeg mener også at det er paent'];

var rand = sentences[Math.floor(Math.random() * sentences.length)];

$(document).ready(function () {
    $('#text').text(rand); {
        if(new RegExp("mener").test(rand)){
            $("#text").addClass("flaekke");
        }
    }
});

ps. if you just want to add a class named flaekke you don't need the id selector, # or the class selector, ., just type in the name of the class you want to add and let jquery do its magic.

edited Dec 4, 2013 at 23:13

answered Dec 4, 2013 at 23:01

Rooster

10.1k8 gold badges49 silver badges72 bronze badges

1 Comment

Münter Over a year ago

This works :-) Just in your jsfiddle, you forgot to remove the hash yourself :P So thanks :D

Markus Kottländer · Accepted Answer · 2013-12-04 22:57:32Z

0

$(document).ready(function () {
    $('#text').text(rand);
    $("#text:contains('MENER')").addClass("flaekke");
});

this should work.

answered Dec 4, 2013 at 22:57

Markus Kottländer

8,2844 gold badges42 silver badges61 bronze badges

Comments

ty. · Accepted Answer · 2013-12-04 22:59:17Z

0

Aside from the incorrect class name, your specific problem comes from the fact that the text actually contains "mener", not "MENER". jQuery :contains is case-sensitive and won't take into account the uppercase transform you have.

Here is a working solution: http://jsfiddle.net/uREUT/136/

$(document).ready(function () {
    $('#text').text(rand);
    $("#text:contains('mener')").addClass("flaekke");
});

answered Dec 4, 2013 at 22:59

ty.

11.2k9 gold badges57 silver badges74 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

Just for completeness sake, I created a fiddle that randomizes the text on a button click and removes the class as well if mener is not present.

See working jsFiddle demo

var $text = $('#text'),
    sentences = 
    [
        'Jeg mener også at det er paent',
        'Jeg også at det er paent',
        'Jeg mener paent'
    ];

$("#randomize-button").on("click", function ()
{
    var rand = sentences[Math.floor(Math.random() * sentences.length)];
    
    if (rand.toLowerCase().indexOf('mener') != -1)
        $text.addClass("flaekke");
    else
        $text.removeClass("flaekke");
    
    $text.text(rand);   
})
.click();

CSS

.flaekke 
{
    background: black;
    color: white;
}

#text 
{
    width: 80%;
    margin: 20px auto;
    padding: 10px;
    font-size: 200%;
    text-align: center;
    z-index: 10;
    text-transform:uppercase;
    border: solid 1px black;
}

Collectives™ on Stack Overflow

jQuery - If certain text, then addClass

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

See working jsFiddle demo

jQuery

CSS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

jQuery

CSS

Comments

Your Answer

Sign up or log in

Post as a guest

Related