如果匹配日期则隐藏

Question

I have dates being outputted on a events list and I want to hide any end dates that match the start date.

For example;

<span class="start_date">Wed 23rd January</span>

<span class="end_date">Wed 23rd January</span>

I'm trying to add a class to the span around the end date when the date matches the start date, so I can hide it.

Here is the JS I've tried to use so far to see if the two fields match.

var a = $('.start_date');
var b = $('.end_date');

if ($.data(a) == $.data(b)) {
    $('.end_date').addClass('hide');
}

Answer 1

Just use text() instead:

 var a = $('.start_date'), b = $('.end_date'); if( a.text() == b.text() ) { $('.end_date').addClass('hide'); } 

 .hide { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="start_date">Wed 23rd January</span> <span class="end_date">Wed 23rd January</span> 

Answer 2

Look, no jQuery, :-)

 let a = document.querySelector('.start_date'); let b = document.querySelector('.end_date'); if (a.textContent == b.textContent) { b.classList.add('hide'); } 

 .hide { display: none; } 

 <span class="start_date">Wed 23rd January</span> <span class="end_date">Wed 23rd January</span> 

But you may want to trim any leading or trailing whitespace or do other processing to ensure things aren't affected by minor formatting differences (eg upper/lower case).