css类未应用于动态内容

Question

我正在尝试按类将css属性应用于动态元素集。之前我有一个包装器div并且应用了样式。我已经做了很多次，从来没有遇到过问题，但现在还没有应用这些样式。我究竟做错了什么？

CSS

.userClassesListP
{
    cursor:pointer;
    width:85%;
    left:0%;
    padding:5px 10px 5px 10px;
    border: 2px solid rgba(100,100,255,0.8);
    margin:3px;
}

Jquery的

$("#myClasses").click(function(){
            if($("#showClassesDiv").height() !== "166px"){
                $("#showClassesDiv").animate({height:"166px"});
                getClassList(id);
            }
        });
        function getClassList(id){
            $.post("php/users-profs/getUserClasses.php",{
                userId:id
            },function(data){
                console.log(data);
                if(data !== "nothing"){
                    data = JSON.parse(data);
                    $("#myClassesListDiv").children().remove();
                    for(var i = 0; i < data.length; i++){
                        console.log("<p id='" + data[i].id + "' class='userClassesListP'>" + data[i].name + "</p>");
                        $("#myClassesListDiv").append("<p id='" + data[i].id + "' class='userClassesListP'>" + data[i].name + "</p>");
                    }
                }

            });
        }

HTML

<div id="userMenuContainer">
        <div id="userMenu">
            <div id="changePasswordDiv" class="userMenuDiv">
                <button id="changePasswordButton" class="userOptButtons">Change Password</button>
            </div>
            <div id="deleteAccountDiv" class="userMenuDiv">
                <button id="deleteAccountButton" class="userOptButtons">Delete Account</button>
            </div>
            <div id="showClassesDiv" class="userMenuDiv">
                <button id="myClasses" class="userOptButtons">My Classes</button>
                <div id="myClassesListDiv"></div>
            </div>
            <div id="logoutDiv" class="userMenuDiv">
                <button id="logoutButton" class="userOptButtons">Logout</button>
            </div>
        </div>
    </div>