CODEWITHSUNDEEP
javascriptjquery
kennechu
kennechu

Reputation: 1422

jquery function to change text color depending on a special character

I want to change the text color if there's a negative number in my HTML list

This is my call to my jquery function inside my HTML.

<ul id="negativeValidation">
    <li>123.5</li>
    <li>-43.5</li>
</ul>

This is my jquery function:

$(document).ready(function() {

    $('#negativeValidation', function() {

        if($("li:contains('-')")== true)
        {
            $("li").css("color", "red");
            console.log("True");
        }else{
            $("li").css("color", "green");
            console.log("False");
        }

    });

});

It's not working, when I go to the console I alway get the "false" message so I would like to know what's wrong or if I'm missing something.

Upvotes: 0

Views: 1115

Answers (4)

brk
brk

Reputation: 50326

I want to change the text color if there's a negative number in my HTML list

but problem title refer special characters. Hope you mean to refer only negative numbers.

So in a pure javascript way 

 // Select all li elements.It will return a collection of matched elements
var getLiItems = document.querySelectorAll("#negativeValidation li");
  // Loop through it , get each's text content ,
      // convert it to float and check if less than 0
 for(var i=0;i<getLiItems.length;i++){
 var getTextContent = parseFloat(getLiItems[i].textContent);
//if less than zero add a class to it
 getTextContent < 0 ? (getLiItems[i].classList.add("negativeColor")): 0;
}

Working Example

Upvotes: 0

Anan
Anan

Reputation: 338

you should need "for":

$(document).ready(function() {

$('#negativeValidation', function() {

   var lis = $('#negativeValidation li');

        for (i = 0; i <= lis.length; i++) {

            if (lis.eq(i).is(':contains(-)')) {
                lis.eq(i).css("color", "red");
                console.log("True");
            } else {
                lis.eq(i).css("color", "green");
                console.log("False");
            }

        }


});

});

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

$("li:contains('-')") returns a jQuery object which is always truthy, even if that selector doesn't exist. To test if an element matches you need to use length or is() but you also are wanting to check each instance

try something like:

$('#negativeValidation li').each(function(){
    var color = $(this).is(':contains(-)') ? 'red' :'green';
    $(this).css('color',color);
});

A more effective way would be use CSS and add a class for negatives

#negativeValidation li {color: green}
#negativeValidation li.negative {color: red}

JS

$('#negativeValidation li').filter(function(){
    return +$(this).text() < 0; 
}).addClass('negative');

Upvotes: 3

Mi-Creativity
Mi-Creativity

Reputation: 9664

First you have console.log('False') in both cases.

write it like this JS Fiddle

$(document).ready(function() {

  $('#negativeValidation li').each(function() {
    var txt = $(this).text();

    if (txt.indexOf('-') > -1) {
      $(this).css("color", "red");
      console.log("True");
    } else {
      $(this).css("color", "green");
      console.log("False");
    }

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="negativeValidation">
  <li>123.5</li>
  <li>-43.5</li>
</ul>

Upvotes: 1

Related Questions