jquery每个if语句addclass

Question

var count = 0;
window.onload = function(){

    $("#add").click(function () {
        var bugValue = $("#bug").val();
        var author = $("#author").val();
        var description = $("#description").val();
        var date = $("#datepicker").val();
        var open = $("#openParent");
        if(!checkInput(bugValue) || !checkInput(author) || !checkInput(date)) {
            alert("Bitte einen Wert für Bug, Author und Due Date eingeben");
        } else {
            var column = $("<div class='column'></div>");
            var entry = $("<div class='portlet'></div>");
            var blueBug = $("<div class='portlet-header'></div>").text(bugValue);
            var name1 = $("<div class='portlet-content'></div>").text(author);
            var dueDate1 = $("<div class='portlet-content'></div>").text(date);
            var text1 = $("<div class='portlet-content'></div>").text(description);

            $(dueDate1).addClass("datepicker");
            $(entry).append(blueBug);
            $(entry).append(name1);
            $(entry).append(dueDate1);
            $(entry).append(text1);
            $(column).append(entry);
            $(open).after(entry);

            count++;
        }
    });

    $( ".column" ).sortable({
        connectWith: ".column",
        handle: ".portlet-header",
        cancel: ".portlet-toggle",
        placeholder: "portlet-placeholder ui-corner-all"
    });

    $( ".portlet" )
        .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
        .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

    $( ".portlet-toggle" ).on( "click", function() {
        var icon = $( this );
        icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
        icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });

    $( function() {
        var today = new Date();
        $( "#datepicker" ).datepicker({
            minDate: today
        });
    } );

    $("#delete").click(function () {
        var closed = $(".closed");
        for(var i=closed.length-1; i>=0; i--) {
            closed.remove();
        }
    });

    $("#todayBugs").click(function (){
        var d = new Date();
        var portlet = $(".portlet");
        var twoDigitMonth = ((d.getMonth().length+1) === 1)? (d.getMonth()+1) : '0' + (d.getMonth()+1);
        var today = (twoDigitMonth + '/'  + d.getDate() + '/' + d.getFullYear());
        /*for(var i=0; i<=count; i++) {
            if(today == $("#datepicker").val()) {
                $(portlet[i]).addClass("highlight");
            }
        }*/
        $(portlet).each(function () {
            if(today == $("#datepicker").val()) {
                $(this).addClass("highlight");
            }
        })
    });

    $("#column").click(function () {
        $(".column").css("width", "140px");
        var columnText = $("#columnText").val();
        var column = $("<div class='columnDIV'></div>");
        var header = $("<div class='header'></div>").text(columnText);
        var newContent = $("<div class='new-content'></div>");
        var closed = $("#closedDIV");

        if(!checkInput(columnText)) {
            alert("Bitte einen Wert eingeben");
        } else {
            $(column).append(header);
            $(column).append(newContent);
            $(closed).before(column);
        }
    });
};

function checkInput(input) {
    return input!=="";
}

@charset "utf-8";

body{
    font-family: Arial, sans-serif;
}

.row {
    width: 170px;
    float: left;
    padding-bottom: 100px;
}

.column {
    width: 170px;
    float: left;
    padding-bottom: 100px;
}

.columnDIV {
    width: 140px;
    float: left;
    padding-bottom: 100px;
}

.highlight {
    background-color: #454545;
    color: yellow;
    font-weight: bold;
}

.portlet {
    border: 1px solid black;
    margin: 10px;
    padding: 0em;
}

.portlet-header {
    background-color: #007fff;
    border: 1px solid black;
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
}
.portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
}
.portlet-content {
    padding: 0.4em;
}
.portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
}

.header  {
    padding: 0.4em;
    border-bottom: 1px solid black;
}

h1{
    font-size: 36px;
    text-align: center;
}

#add{
    float: right;
}

#addcolumn{
    float: right;
}

#title{
    float: left;
}

.text{
    width: 218px;
    text-align: justify;
    margin-right: 15px;
    padding-right: 15px;
}

.textarea{
    width: 580px;
    text-align: justify;
    margin-right: 15px;
    padding-right: 15px;
}

.clearer{
    clear: both;
}

.wrapper{
    width: 600px;
    margin: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bug-List</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="bugs.css" />
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="bugs.js"></script>
</head>
<body>
<div id="dialogHTML"></div>
<div class="wrapper">

    <h1>Bug-List</h1><br/>

    <form name="bugForm" action="#">
        <div id="title">
            <label>Bug:</label>
            <input class="text" id="bug" type="text" name="bug" size="10" />
        </div>

        <div>
            <label>Author:</label>
            <input class="text" id="author" type="text" name="author" size="10" />
            <div class="clearer"></div><br/>
        </div>

        <div>
            <label>Description:</label>
            <textarea class="textarea" id="description" name ="textarea" rows="4" cols="50"></textarea><br/>
            <div class="clearer"></div><br/>
        </div>

        <form>
            Due Date:
            <input type="text" id="datepicker"><br>
        </form>

        <input id="add" type="button" value="Add" /><br/>

        <hr/>

        <input id="todayBugs" type="button" value="Today´s Due Bugs" />
        <input id="delete" type="button" value="Delete closed" />

        <div id="addcolumn">
        <input id="column" type="button" value="Add Column" />
        <input class="text" id="columnText" type="text" name="new" size="10" />
        </div>

        <hr/>

        <fieldset id="field">
            <legend>Bugs</legend>

            <div class="column">
                <div class="header" id="openParent">Open</div>
                <div class="open-content"></div>
            </div>
            <div class="column">
                <div class="header">In Progress</div>
                <div class="progress"></div>
            </div>
            <div class="column" id="closedDIV">
                <div class="header">Closed</div>
                <div class="column closed"></div>
            </div>
        </fieldset>
    </form>

</div>
</body>
</html>

我正在尝试选择今天到期的所有portlet元素，并将它们添加到类高亮显示中。 问题是，它将类添加到所有portlet元素，如果它找到今天到期的那个，而不仅仅是到期portlet。 它既不适用于for循环，也不适用于jQuery each（）。

$("#todayBugs").click(function (){
    var d = new Date();
    var portlet = $(".portlet");
    var twoDigitMonth = ((d.getMonth().length+1) === 1)? (d.getMonth()+1) : '0' + (d.getMonth()+1);
    var today = (twoDigitMonth + '/'  + d.getDate() + '/' + d.getFullYear());
    /*for(var i=0; i<=count; i++) {
        if(today == $("#datepicker").val()) {
            $(portlet[i]).addClass("highlight");
        }
    }*/
    $(portlet).each(function () {
        if(today == $("#datepicker").val()) {
            $(this).addClass("highlight");
        }
    })
});