javascript - Jquery/Javascript 向 div 添加独特的类

Question

我在使用 javascript 生成的表格时遇到问题，该表格在页面上显示良好，末尾的 div (bottom_box) 需要具有基于其 html 内容的自定义类。代码如下:

            <script type="text/javascript">
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET", "servicereport2.xml", false);
            xmlhttp.send();
            xmlDoc = xmlhttp.responseXML;

            if (xmlDoc) {
                var x = xmlDoc.getElementsByTagName("ISSUE");
                for (i = 0; i < x.length; i++) {
                    document.write("<div class='box_lrg'><div class='box_top'></div><div class='box_middle'><table border='0'>");
                    document.write("<tr><td class='title'><h2>");
                    document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
                    document.write("</h2></td><td class='issueid'><strong>IssueID: </strong><br />");
                    document.write(x[i].getElementsByTagName("ISSUEID")[0].childNodes[0].nodeValue);
                    document.write("</td><td class='status'><strong>Status: </strong><br />");
                    document.write(x[i].getElementsByTagName("STATUSID")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                    document.write("<tr><td colspan=3 class='description'>");
                    document.write(x[i].getElementsByTagName("TICKETDESCRIPTION")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                    document.write("<tr><td></td><td class='updated'><strong>Last Updated: </strong><br />");
                    document.write(x[i].getElementsByTagName("UPDATEDON")[0].childNodes[0].nodeValue);
                    document.write("</td><td class='author'><strong>Author: </strong><br />");
                    document.write(x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                    document.write("</table>");
                    document.write("</div><div class='box_bottom'>");
                    document.write(x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue);
                    document.write("</div></div>");


                    category = $('.box_bottom').html();
                     if (category == 'Notifications') {
                       $(".box_bottom").addClass("notifications");
                     }
                     category = $('.box_bottom').html();
                     if (category == 'VO')
                     {
                       $(".box_bottom").addClass("VO");
                     }



                }
            }
            else {
                document.write("<h3><span class='blue'>There are no issues at the moment.</span></h3>");
            }

如您所见，JQuery 包含在循环中，但只是将相同的类应用于所有 bottom_box div - 它们都是 CATEGORY XML 标记的第一次出现。 EG 如果第一个“类别”是 VO，第二个是“通知”，那么它们都被应用到 VO。

欢迎任何帮助。

Answer 1

你为什么不这样尝试:

....
if (xmlDoc) {
    var x = xmlDoc.getElementsByTagName("ISSUE");
    for (i = 0; i < x.length; i++) {
        ....
        document.write("</td></tr>");
        document.write("</table>");

        //store the category value in a var
        var category = x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue);
        var addClass;

        //check category value and set the class name to add to the div
        if(category == "Notifications")
            addClass = "notifications";
        else if(category == "VO")
            addClass = "VO";

        //add the class to the div
        document.write("</div><div class='box_bottom "+addClass+"'>");
        document.write(category);
        document.write("</div></div>");
        ...

一旦你处理了类别内容，而不是直接将它添加到文档中，首先看看它包含什么，然后将所需的类应用到 div。

希望对你有帮助，如果知道请告诉我