CODEWITHSUNDEEP
javascriptjqueryhtml
Designer
Designer

Reputation: 895

Check if 2 variables contain exactly the same text and do action using jquery

I have the code below and i want to check if the two variables "n" and "w" contain exactly the same text and do an action. However i can store in the variables the text string but when i try to set the conditional it doesn't work?

What am i doing wrong ?

 var d = new Date();
    var weekday = new Array(7);
    
    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Wednesday";
    weekday[3] = "Thirsday";
    weekday[4] = "Πέμπτη";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";
    var n = weekday[d.getDay()];
    var w =  $('.today-tag').text();
   
  
    if(n === w) {
    $('.today-tag').text('TODAY');
    } else {
    $('.today-tag').text('');
    }
.today-tag {margin-left:10px;color:red;font-size:10px;font-weight:bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="the-day">Sunday<div class="today-tag"></div></div>
<div class="the-day">Monday<div class="today-tag"></div></div>
<div class="the-day">Tuesday<div class="today-tag"></div></div>
<div class="the-day">Wednesday<div class="today-tag"></div></div>
<div class="the-day">Thirsday<div class="today-tag"></div></div>
<div class="the-day">Friday<div class="today-tag"></div></div>
<div class="the-day">Saturday<div class="today-tag"></div></div>

Upvotes: 0

Views: 321

Answers (3)

Mamun
Mamun

Reputation: 68923

There is nothing in $('.today-tag').text(). You have to use the index of the current date in the array and parent() to get the text: 

var d = new Date();
var weekday = new Array(7);

weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Wednesday";
weekday[3] = "Thirsday";
weekday[4] = "Πέμπτη";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var n = weekday[d.getDay()];
var idx = d.getDay();
var w =  $('.today-tag:eq('+idx+')').parent().text();

if(n === w) {
  $('.today-tag:eq('+idx+')').text('TODAY');
} else {
  $('.today-tag').text('');
}
.today-tag {margin-left:10px;color:red;font-size:10px;font-weight:bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="the-day">Sunday<div class="today-tag"></div></div>
<div class="the-day">Monday<div class="today-tag"></div></div>
<div class="the-day">Tuesday<div class="today-tag"></div></div>
<div class="the-day">Wednesday<div class="today-tag"></div></div>
<div class="the-day">Thirsday<div class="today-tag"></div></div>
<div class="the-day">Friday<div class="today-tag"></div></div>
<div class="the-day">Saturday<div class="today-tag"></div></div>

Upvotes: 2

Volcano
Volcano

Reputation: 1

the .today-tag is an empty div element so we have to compare it with .the-day instead apart from that the $('.the-day') will return an array of elements thus we need to use the date() object there as well.. and lastly we just want today next to the current day so we use children() to return array of children of the selected day.. since you only have one child object we use 0th elemement.

i hope that explain's it well. (ps: i am no jquery expert been using vanilla js for long time thus there might be better alternative to children() method )

<script>
$(document).ready( function() {
    var d = new Date();
    var weekday = new Array(7);

    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Wednesday";
    weekday[3] = "Thirsday";
    weekday[4] = "Πέμπτη";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";
    var n = weekday[d.getDay()];
    var w =  $('.the-day')[d.getDay()];
    var today = $(w).children()[0]; //selects first child

    if(n === $(w).text()) {
    $(today).text('TODAY');

    } else {
    $(today).text('');
    }
});

Upvotes: 0

flyingfox
flyingfox

Reputation: 13506

There are many div with class today-tag,so $('.today-tag').text() will not return the value you want.you can use each() to compare the value

    var d = new Date();
    var weekday = new Array(7);
    
    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Wednesday";
    weekday[3] = "Thirsday";
    weekday[4] = "Πέμπτη";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";
    var n = weekday[d.getDay()];
    $(".today-tag").each(function(index,element){
     if($.trim($(element).parent().text())== n){
        $(element).text("Today");
      }else{
        $(element).empty();
      }
    });
.today-tag {margin-left:10px;color:red;font-size:10px;font-weight:bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="the-day">Sunday<div class="today-tag"></div></div>
<div class="the-day">Monday<div class="today-tag"></div></div>
<div class="the-day">Tuesday<div class="today-tag"></div></div>
<div class="the-day">Wednesday<div class="today-tag"></div></div>
<div class="the-day">Thirsday<div class="today-tag"></div></div>
<div class="the-day">Friday<div class="today-tag"></div></div>
<div class="the-day">Saturday<div class="today-tag"></div></div>

Upvotes: 2

Related Questions