div에 고유 한 클래스를 추가하는 Jquery/Javascript

Question

끝 부분의 div (bottom_box)에 HTML 내용을 기반으로하는 사용자 정의 클래스가 있어야하는 javascript 생성 테이블에 문제가 있습니다. 코드는 다음과 같습니다 :

  <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를 동일한 수준을 적용 볼 수 있듯이 - 그들은 모든 카테고리의 첫 번째 항목입니다 XML 태그. 첫 번째 "카테고리"가 VO이고 두 번째가 "알림"이면 EO가 모두 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에 원하는 클래스.

이 경우 내가 그것을 실행할 때 클래스 box_bottom와 DOM에있는 모든 요소를 ​​선택합니다

Answer 2

JQuery와 라인 $('.box_bottom')을 알려, 희망이 도움이. 특정 상자를 선택하려면 jquery를 사용하여 해당 상자를 만들고 document.write 대신 필요에 따라 해당 상자에 대한 참조를 보관할 수 있습니다. 당신이하고있는 때문에 XML 처리기와 jQuery로 원시 httpXMLrequest의 사용에 버그를 무시

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

, 당신은 그것은 작동하지 않는 각 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를 갖는 모든 요소에 클래스를 추가하는 ..