交替行颜色div

Question

我想尝试每隔5行左右将斑马条纹添加到我的div表中，但是如果按预期的方式工作，我会先测试一下偶数。

我尝试了nth-child行和nth-of-type行，但似乎表格中没有任何变化。我做错了吗？

这是创建我的表

的代码部分

 $.ajax({
url: "viewDayInDocuments",
type: 'post',
data: {currentDay: currentDay, currentMonth: currentMonth, currentYear: currentYear},
success: function(result){
    $('.descCell').text('');
    $('.descCell').remove();
    $('.row').remove();
    $('.failure').text('');
    $('.failure').remove();
    $('.listItem').remove();
    $('.incomingForm').remove();

    incomingDoc = JSON.parse(result);
    if(incomingDoc.details == false){
        $('.row').remove();
        $('.descCell').text('');
        $('.descCell').remove();
        $("#superWrap").hide();
        $("#noDocs").append("<div class = 'failure'>No Documents Available</div>");
        $('#noDocs').show();
    }
    else{
                $("#mainListing").prepend("<div class = 'row'><div class = 'cell'><div class = 'descCell'><p class = 'listItem'><form class = 'incomingForm' method = 'POST' action = '/DTS/index.php/Index/editInfoIncoming'><b>Reference Number: </b><a href = '#' onclick = 'sendForm(this)' class = 'list'>"
                + incomingDoc.details[i].referenceNo + "</a><br/><label class = 'list'>" 
                + "<b>Sender: </b>"
                + incomingDoc.details[i].sender + "<br/>"
                + "<b>Company Name: </b>"
                + incomingDoc.details[i].companyName + "<br/>"
                + "<b>Subject: </b>"
                + incomingDoc.details[i].subject + 
                "<label><input type = 'hidden' name = 'incomingId' value = '" + incomingDoc.details[i].incomingId + 
                "'/><input type = 'hidden' name = 'referenceNo' value = '" + incomingDoc.details[i].referenceNo + 
                "'/><input type = 'hidden' name = 'documentType' value = '" + incomingDoc.details[i].documentTypeId + 
                "'/><input type = 'hidden' name = 'documentDate' value = '" + incomingDoc.details[i].documentDate + 
                "'/><input type = 'hidden' name = 'dateReceived' value = '" + incomingDoc.details[i].dateReceived + 
                "'/><input type = 'hidden' name = 'sender' value = '" + incomingDoc.details[i].sender + 
                "'/><input type = 'hidden' name = 'companyId' value = '" + incomingDoc.details[i].companyId + 
                "'/><input type = 'hidden' name = 'company' value = '" + incomingDoc.details[i].companyName + 
                "'/><input type = 'hidden' name = 'staffName' value = '" + incomingDoc.details[i].responsibleStaffName +
                "'/><input type = 'hidden' name = 'staff' value = '" + incomingDoc.details[i].responsibleStaffId + 
                "'/><input type = 'hidden' name = 'subject' value = '" + incomingDoc.details[i].subject + 
                "'/><input type = 'hidden' name = 'actionDone' value = '" + incomingDoc.details[i].actionDone + 
                "'/><input type = 'hidden' name = 'track' value = '" + incomingDoc.details[i].track + 
                "'/><input type = 'hidden' name = 'completed' value = '" + incomingDoc.details[i].completed + 
                "'/><input type = 'hidden' name = 'remarks' value = '" + incomingDoc.details[i].remarks + 
                "'/></form></div></div>");
        } 
        $("#superWrap").show();      
        //$("#myform").show();
    }

        //if link is clicked go edit the form with given values
}

}）;

我的CSS相关代码：

.cell{
    min-width: 450px;
    background-color: #eaeaea;
    border-top: 1px solid;
}

.cell:nth-child(even){
     background-color: #B0C4DE;
}

渲染代码div块：

<div id="superWrap" style="display: block;">
    <div id="wrapper">

            <div class="listIncoming">
                <div class="desc">
                <label><b>Incoming Documents on the Day</b></label>
                </div>

                <div id="mainListing"><div class="row"><div class="cell"><div class="descCell"><p class="listItem"></p><form class="incomingForm" method="POST" action="/DTS/index.php/Index/editInfoIncoming"><b>Reference Number: </b><a href="#" onclick="sendForm(this)" class="list">2014-IN05-ORD-1245</a><br><label class="list"><b>Sender: </b>Discuss<br><b>Company Name: </b>NPA<br><b>Subject: </b>List it down as subject<label><input type="hidden" name="incomingId" value="42"><input type="hidden" name="referenceNo" value="2014-IN05-ORD-1245"><input type="hidden" name="documentType" value="1"><input type="hidden" name="documentDate" value="2014-05-12"><input type="hidden" name="dateReceived" value="2014-05-12"><input type="hidden" name="sender" value="Discuss"><input type="hidden" name="companyId" value="3"><input type="hidden" name="company" value="NPA"><input type="hidden" name="staffName" value="Staff, Meeting A"><input type="hidden" name="staff" value="2"><input type="hidden" name="subject" value="List it down as subject"><input type="hidden" name="actionDone" value="no"><input type="hidden" name="track" value="1"><input type="hidden" name="completed" value="0"><input type="hidden" name="remarks" value="hey"></label></label></form></div></div></div><div class="row"><div class="cell"><div class="descCell"><p class="listItem"></p><form class="incomingForm" method="POST" action="/DTS/index.php/Index/editInfoIncoming"><b>Reference Number: </b><a href="#" onclick="sendForm(this)" class="list">398041839213</a><br><label class="list"><b>Sender: </b>me<br><b>Company Name: </b>NPA<br><b>Subject: </b>asdas subject<label><input type="hidden" name="incomingId" value="30"><input type="hidden" name="referenceNo" value="398041839213"><input type="hidden" name="documentType" value="3"><input type="hidden" name="documentDate" value="2014-05-12"><input type="hidden" name="dateReceived" value="2014-05-12"><input type="hidden" name="sender" value="me"><input type="hidden" name="companyId" value="3"><input type="hidden" name="company" value="NPA"><input type="hidden" name="staffName" value="Man, Alf B"><input type="hidden" name="staff" value="5"><input type="hidden" name="subject" value="asdas subject"><input type="hidden" name="actionDone" value="sad"><input type="hidden" name="track" value="1"><input type="hidden" name="completed" value="0"><input type="hidden" name="remarks" value="dsad"></label></label></form></div></div></div><div class="row"><div class="cell"><div class="descCell"><p class="listItem"></p><form class="incomingForm" method="POST" action="/DTS/index.php/Index/editInfoIncoming"><b>Reference Number: </b><a href="#" onclick="sendForm(this)" class="list">908941</a><br><label class="list"><b>Sender: </b>me<br><b>Company Name: </b>NPA<br><b>Subject: </b>testing<label><input type="hidden" name="incomingId" value="24"><input type="hidden" name="referenceNo" value="908941"><input type="hidden" name="documentType" value="1"><input type="hidden" name="documentDate" value="2014-05-06"><input type="hidden" name="dateReceived" value="2014-05-12"><input type="hidden" name="sender" value="me"><input type="hidden" name="companyId" value="3"><input type="hidden" name="company" value="NPA"><input type="hidden" name="staffName" value="Staff, Meeting A"><input type="hidden" name="staff" value="2"><input type="hidden" name="subject" value="testing"><input type="hidden" name="actionDone" value="round round"><input type="hidden" name="track" value="0"><input type="hidden" name="completed" value="1"><input type="hidden" name="remarks" value="round"></label></label></form></div></div></div>
                    <input type="button" value="Close" id="btnOK" align="center">
                </div>

            </div>
    </div>
</div>

Answer 1

使用您当前的标记，这就是您所需要的：

.row{
    min-width: 450px;
    background-color: #eaeaea;
    border-top: 1px solid;
}

.row:nth-child(even){
     background-color: #B0C4DE;
}

<强> FIDDLE

Answer 2

您的问题在这里：

.cell:nth-child(even){
     background-color: #B0C4DE;
}

应该是

.descCell:nth-child(even){
     background-color: #B0C4DE;
}

nth-child没有选择班级的孩子，它会将班级视为父元素的孩子。

Answer 3

如果您要动态生成行，请根据您生成的"cell-0"行设置类名（例如，在"cell-1"和ith之间切换）。类名中的0或1只是i%2，因为您在这里交替使用2种颜色。

Answer 4

如果您要动态生成行，则必须将nth-child选择器声明为.row。所以一定是这样的：

.row{
    min-width: 450px;
    background-color: #eaeaea;
    border-top: 1px solid;
}
.row:nth-child(even){
    background-color: #B0C4DE;
}