CODEWITHSUNDEEP
javascriptjqueryeach
brandozz
brandozz

Reputation: 1119

Hide an element based on id value with jQuery

I have a list of events and I'm setting the id of each event as an expiration date so when the date is less than the current date the element will be hidden. You can see my code below, It looks like I'm losing the value of my dateContent variable that's defined outside of my each function:

html:

<div class="today"></div>
                        <ul id="20160430" class="nostylelist event-list">
                            <li>Event 1</li>
                            <li>April 29, 2016</li>
                            <li>Minneapolis Convention Center</li>
                            <li>Minneapolis, MN</li>
                            <li>Booth 659</li>
                        </ul>
                        <ul id="20151106" class="nostylelist event-list">
                            <li>Event 2</li>
                            <li>November 4-5, 2015</li>
                            <li>Minneapolis Convention Center</li>
                            <li>Minneapolis, MN</li>
                            <li>Booth 659</li>
                        </ul>

$(function() {
    var today
    var year
    var month
    var monthLength
    var day
    var dateContent

    function currentDate() {
        var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth()+1;
        var monthLength = month.toString().length;
        var day = today.getDate();
        if (monthLength == 1) {
            dateContent = $('.today').append(year).append('0' + month).append(day);
        } else {
            dateContent = $('.today').append(year).append(month).append(day);
        }
    }
    currentDate();


    $('.event-list').each(function( index ) {
        if ($(this).attr('id') < dateContent) {
            $(this).hide();
        }
        //$('.id').text(dateContent);
    });

});

Upvotes: 0

Views: 67

Answers (3)

Doctor Strange
Doctor Strange

Reputation: 351

Replace the currentDate function by this to get the dateContent as a string in the expected format. Note that getFullYear, getMonth and getDate return numbers so we should not add them directly if we want to preserve our format.

function currentDate() { 
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var monthLength = month.toString().length;
    var day = today.getDate();
    if (monthLength == 1) {
        dateContent = "" + year + "0" + month + day;
    } else {
        dateContent = "" + year + month + day;
    }
}

Upvotes: 3

jeetaz
jeetaz

Reputation: 731

<script>
    $(function () {
        var today
        var year
        var month
        var monthLength
        var day
        var dateContent
        function currentDate() {
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth() + 1;
            var monthLength = month.toString().length;
            var day = today.getDate();
            if (monthLength == 1) {
                $('.today').append(year).append('0' + month).append(day);
                dateContent = year + '0' + month + day;
            } else {
                $('.today').append(year).append(month).append(day);
                dateContent = year + month + day;
            }

        }
        currentDate();            
        $('.event-list').each(function (index) {
            console.log(dateContent);
            console.log($(this).attr('id'));
            if ($(this).attr('id') < dateContent) {
                $(this).hide();
            }                
        });

    });

Upvotes: 0

Nikhil Baliga
Nikhil Baliga

Reputation: 1341

I think you are expecting dateContent to hold the current date. However, what you are doing is setting the current date, example, 20160410 to .today and the return value of the appending is a DOM element, not the value 20160410.

So even the comparison with attr('id') will not work.

Upvotes: 0

Related Questions