JQuery - Check a value

Question

I have a HTML likes this

 <ul id="changeColr">
    <li>100</li>
    <li>200</li>
    <li>300</li>
</ul>
<button>Click Me</button>

if a li contains a value of 200, I want to use JQuery to change the color of 200 to red.

Here is my JQuery

$(document).ready(function() {
    $('button').click(function() {
        if ($('#changeColr li').attr('200')) {
            $(this).css('color', 'red');
        } else {
            $(this).css('color', '')
        }
    });
});

But it doesn't work out. Please give me a hand. Thanks

if( $('#changeColr li').attr('200')) changed with if( $('#changeColr li').text('200')) — Atal Shrivastava
– Atal Shrivastava, Commented May 15, 2014 at 5:29

Adil · Accepted Answer · 2014-05-15 05:29:21Z

3

You can use :contains to filter the element with specific text.

:contains Select all elements that contain the specified text, jQuery Docs

Live Demo

$('button').click(function(){
    $('#changeColr li:contains(200)').css('color', 'red');
});

Edit to pass the text of element to filter you can make the selector by concatenating selector string.

var text = "200";
$('#changeColr li:contains('+ text +')').css('color', 'red');

answered May 15, 2014 at 5:29

Adil

148k25 gold badges217 silver badges207 bronze badges

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

Comments

Arun P Johny · Accepted Answer · 2014-05-15 05:29:00Z

1

I think you are looking for

jQuery(function ($) {
    $('button').click(function () {
        //iterate through each li elements and sets its color
        $('#changeColr li').css('color', function () {
            //if the text in the current li is 300 then return red else ''
            return $.trim($(this).text()) == '300' ? 'red' : '';
        })
    }); //end click
}); //end ready

Demo: Fiddle

answered May 15, 2014 at 5:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2014-05-15 05:30:10Z

0

Try below :

$(document).ready(
    function()
        {
            $('button').click(
                function()
                    {
                       $("#changeColr li").each(function(){
                         if($(this).text()=="200")
                              $(this).css('color','red');
                      });
                    }
            );  //end click
        }
);

answered May 15, 2014 at 5:30

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

1 Comment

abcid d Over a year ago

Thank everyone very much! Every method is working well! I have to vote for everyone, but it doesn't let me!

Felix · Accepted Answer · 2014-05-15 05:30:20Z

0

You can add a class to your css:

.highlight {
    color: red;
}

then you can use :contains() selector to target only the list item that cotain 200 inside its text along with .toggleClass() to toggle the highlight class on button click:

$(document).ready(function () {
    $('button').click(function () {
        $('#changeColr li:contains("200")').toggleClass('highlight');
    });
});

Fiddle Demo

answered May 15, 2014 at 5:30

Felix

38.2k8 gold badges46 silver badges56 bronze badges

Comments

SuperNOVA · Accepted Answer · 2014-05-15 05:31:55Z

0

Try this:

$("button").click(function(){//try to use on.('click') though
$("#changeColr").find("li").each(function(){
if($(this).text()=="200"){
$(this).css('color','red');
}
});

answered May 15, 2014 at 5:31

SuperNOVA

7617 silver badges16 bronze badges

1 Comment

brasofilo Over a year ago

If you want to make rep, study the best voted answer to this question ;) I'm out of votes for today, otherwise I'd upvote Felix's answer too.

Chirag Vidani · Accepted Answer · 2014-05-15 05:33:29Z

0

Your code is modified slightly to iterate for loop on li

$(document).ready(
    function()
    {
        $('button').click(
            function()
            {                $('#changeColr li').each(function(){
                if( $(this).html() == '200')
                {
                    $(this).css('color', 'red');
                }
                else
                {
                    $(this).css('color', '')
                }

            });
                        }
        );  //end click
    }
);  //end ready

Refer demo here

answered May 15, 2014 at 5:33

Chirag Vidani

2,59519 silver badges27 bronze badges

Collectives™ on Stack Overflow

JQuery - Check a value

6 Answers 6

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related