jquery / comparing dates in list

Question

I have been trying to solve this issue for two days. Maybe someone has a hint for me?

I have this couple of divs and in every div.news-list-item are 2 dates - startdate and enddate. I want to compare the two dates to check if they are equal. If they are equal then add the class show, if not do something else.

The Problem is that startDate is always empty or undefined.

<div class="news-list-container row">   
    <div class="news-list-item nth-item-1">
        <span class="event-from">17.10.2014</span>
        <span class="event-to">19.10.2014</span>
    </div>

    <div class="news-list-item nth-item-2">
        <span class="event-from">07.12.2014</span>
        <span class="event-to">07.12.2014</span>
    </div>

    <div class="news-list-item nth-item-3">
        <span class="event-from">08.12.2014</span>
        <span class="event-to">08.12.2014</span>
    </div>   
</div>



$('.news-list-container').each(function() {
    var $children = $(this).children(),
        count = $children.size(),
        $item;
        $children.each(function(i) {
            $item = $(this).addClass('nth-item-' + (i + 1))

});

$(".news-list-item").each(function() {
    var startDate =  $(".event-from").val();
    var endDate = $(".event-to").val();

        if(startDate == endDate) {
                $(this).addClass("show");       
            } else {

            }
    }); 
    console.log("story " + startDate + " story");
    }); 
});

score 1 · Answer 1 · edited May 23 '17 at 11:57

You need to add the context of this to the $(".event-from") and $(".event-to") to get the child divs.

Additionally spans do not have val() but text()

var startDate =  $(".event-from",this).text();
var endDate = $(".event-to",this).text();

which is the same as

$(this).find("span.event-from")...

More here: How to get the children of the $(this) selector?

My example

$(function() {
  $(".news-list-container > .news-list-item").each(function() {
    var startDate = $(".event-from",this).text();
    var endDate   = $(".event-to",this).text();
    $(this).toggle(startDate != endDate);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="news-list-container row">   
    <div class="news-list-item nth-item-1">
        <span class="event-from">17.10.2014</span>
        <span class="event-to">19.10.2014</span>
    </div>

    <div class="news-list-item nth-item-2">
        <span class="event-from">07.12.2014</span>
        <span class="event-to">07.12.2014</span>
    </div>

    <div class="news-list-item nth-item-3">
        <span class="event-from">08.12.2014</span>
        <span class="event-to">08.12.2014</span>
    </div>   
</div>

score 0 · Answer 2 · answered Oct 02 '14 at 08:23

You can try this

$(function(){

    $('.news-list-item').each(function() {

        if($('.event-from', this).text() == $('.event-to', this).text()) {

           $(this).addClass('show);

        } else {

            console.log('Not Equal');
        }

    });

});

score 0 · Accepted Answer · answered Oct 02 '14 at 08:26

use find relative to the current $(this)
use text to retrieve text content

Here a working live sample:

$('.news-list-container').each(function() {
    var $children = $(this).children(), count = $children.size(), $item;
    $children.each(function(i) {
        $item = $(this).addClass('nth-item-' + (i + 1))
    });

    $(this).find(".news-list-item").each(function() {
        var startDate = $(this).find(".event-from").text();
        var endDate = $(this).find(".event-to").text();

        if(startDate == endDate) {
            $(this).show();       
        } else {
            $(this).hide(); 
        }
        console.log("story " + startDate + " story");
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="news-list-container row">   
    <div class="news-list-item nth-item-1">
        <span class="event-from">17.10.2014</span>
        <span class="event-to">19.10.2014</span>
    </div>

    <div class="news-list-item nth-item-2">
        <span class="event-from">07.12.2014</span>
        <span class="event-to">07.12.2014</span>
    </div>

    <div class="news-list-item nth-item-3">
        <span class="event-from">08.12.2014</span>
        <span class="event-to">08.12.2014</span>
    </div>   
</div>

This is a perfect example how to do it. I made two small modifications but it's not worth telling because I didnt described it in my question. Thanks a lot Nicolas. — bluebyte, Oct 02 '14 at 08:47

jquery / comparing dates in list

3 Answers3