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");
    }); 
});

Community · Accepted Answer · 2017-05-23 11:57:42Z

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>

Nicolas Albert · Accepted Answer · 2014-10-02 08:26:03Z

0

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>

answered Oct 2, 2014 at 8:26

Nicolas Albert

2,5961 gold badge18 silver badges18 bronze badges

1 Comment

bluebyte Over a year ago

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.

tliokos · Accepted Answer · 2014-10-02 08:23:59Z

0

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');
        }

    });

});

answered Oct 2, 2014 at 8:23

tliokos

3,6363 gold badges30 silver badges28 bronze badges

Collectives™ on Stack Overflow

jquery / comparing dates in list

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related