使用 jQuery 隐藏基于 id 值的元素

Question

我有一个事件列表，我将每个事件的 ID 设置为到期日期，因此当日期小于当前日期时，该元素将被隐藏。您可以在下面看到我的代码，看起来我正在丢失在每个函数之外定义的 dateContent 变量的值：

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

});

Answer 1

我认为您希望 dateContent 保留当前日期。但是，您正在做的是将当前日期（例如 20160410）设置为 .today 并且附加的 return 值是一个 DOM 元素，而不是值 20160410.

因此即使与 attr('id') 进行比较也无法正常工作。

Answer 2

以此替换 currentDate 函数，将 dateContent 获取为预期格式的字符串。请注意 getFullYear、getMonth 和 getDate return 数字，因此如果我们想保留我们的格式，我们不应直接添加它们。

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

Answer 3

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

    });

使用 jQuery 隐藏基于 id 值的元素

Hide an element based on id value with jQuery

javascript

each

jquery