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。

希望有所帮助，以防让我知道

Answer 2

jquery行$('.box_bottom')将在运行时选择当前位于dom中且类box_bottom的所有元素。如果要选择特定的框，您也可以使用jquery创建这些框，并在需要时专门为该框添加一个参考，而不是使用document.write。

var boxBottom = $('<div class="box_bottom"></div>');
boxBottom.html(x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue);

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

Answer 3

忽略xml处理程序中的错误以及使用jQuery对原始httpXMLrequest的使用，您需要遍历每个box_bottom并设置其类

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.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var 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>");
        }
        $('.box_bottom').each(function() {
                    var $this = $(this), category = $this.html();
                    if (category == 'Notifications') {
                        $this.addClass("notifications");
                    } else if (category == 'VO')
                        $this.addClass("VO");
                });
    }
}

xmlhttp.send();

Answer 4

它不起作用，因为你做错了。一个（最好的？）解决方案是使用jQuery元素创建和append（）函数，它将生成一个可以在循环中设置其类的实际dom元素。

当你这样做时：

$(".box_bottom").addClass("notifications")

您正在将类添加到具有类.box_bottom的所有元素中，在for循环的末尾实际上是所有底部框...

Jquery / Javascript为div添加唯一的类

4 个答案: