2009-06-11 5 views
0

jQuery를 사용하여 HTML 셸을 페이지에 삽입하고 XML로 셸을 채 웁니다. 여기에 문제의 XML은 내가하는 일은 내가하는 것입니다 원하는 각 minorPropCategory에 대한 HTML 코드를 가져,이 코드jQuery 중첩 XML 질문

다음
$(xml).find('minorPropCategory').each(function(){ 
         var minorHeader=$(this).attr("title"); 
         var minorId=$(this).attr("title").replace(/ /g,''); 
         var minorModuleContainerCode = "minorModuleContainer.html"; 
         //names the div with a unique ID 
         minorDiv = $("<div id='"+minorId+"minorModuleContainer' class='minorModuleGroupContainer'>"); 
         //Sets loading message in case it takes longer than usual to load 
         minorDiv.html("Loading......"); 
         //After minorModuleContainerCode.html code loads, starts populating module 
         minorDiv.load(minorModuleContainerCode,"t", 
          function(){ 
           $("#"+minorId+"minorModuleContainer").find(".minorModuleHeader").html(minorHeader); 

          } 
         ); 
         $("#minorModuleContainer").append(minorDiv); 

를 사용하여 제목을 추가하고,

<minorPropCategory title="Test Title 1"> 
    <minorProp>FLV</minorProp> 
    <minorProp>BLV</minorProp> 
    <minorProp>RLV</minorProp> 
    </minorPropCategory> 
    <minorPropCategory title="Test Title 2"> 
    <minorProp>LAS</minorProp> 
    <minorProp>ILV</minorProp> 
    <minorProp>BIL</minorProp> 
    </minorPropCategory> 

그래서 처음 다른 HTML 스 니펫을 추가 한 다음 채 웁니다. 이것은 내가 문제가있는 곳입니다. 나는 이것 같이 그것을 시도 할 수있다

//Create the actual minor modules 
         $(this).find('minorProp').each(function(){ 
          var minorPropCode = $(this).text(); 
          var minorModuleCode = "minorModule.html"; 
          minorModuleDiv = $("<div id='"+minorPropCode+"minorModule' class='minorModule'>"); 
          minorModuleDiv.html("Loading......"); 
          minorModuleDiv.load(minorModuleCode,"b", 
          function(){ 
           $.ajax({ 
            type: "GET", url: minorPropCode+".xml", dataType: "xml", 
            success: function(xml3) { 
             $("#"+minorPropCode+"minorModule").find(".minorPropLogo").attr(
              { 
               src:$(xml3).find('smallImage').text(), 
               alt:$(xml3).find('smallImageAlt').text() 
              } 
             ); 

            } 
           }); 
          }); 
          $("#"+minorId+"minorModuleContainer").append(minorModuleDiv); 
         }); 
        }); 

그러나 나가 결코 적당한시기에 발사하고 있다고 생각하지 않기 때문에 결코 페이지에 나타나지 않는다. 또는, 마이너 모듈의 생성을 부모의 .load 함수로 옮겨 보았습니다. 그러나 다른 문제가 발생했습니다. 코드는 다음과 같습니다.

//MINOR MODULE CODE 
        $(xml).find('minorPropCategory').each(function(){ 
         var minorHeader=$(this).attr("title"); 
         var minorId=$(this).attr("title").replace(/ /g,''); 
         var minorModuleContainerCode = "minorModuleContainer.html"; 
         //names the div with a unique ID 
         minorDiv = $("<div id='"+minorId+"minorModuleContainer' class='minorModuleGroupContainer'>"); 
         //Sets loading message in case it takes longer than usual to load 
         minorDiv.html("Loading......"); 
         //After minorModuleContainerCode.html code loads, starts populating module 
         minorDiv.load(minorModuleContainerCode,"t", 
          function(){ 
           $("#"+minorId+"minorModuleContainer").find(".minorModuleHeader").html(minorHeader); 
           $(this).find('minorProp').each(function(){ 
            alert("minorPropFired"); 
            var minorPropCode = $(this).text(); 
            var minorModuleCode = "minorModule.html"; 
            minorModuleDiv = $("<div id='"+minorPropCode+"minorModule' class='minorModule'>"); 
            minorModuleDiv.html("Loading......"); 
            minorModuleDiv.load(minorModuleCode,"b", 
            function(){ 
             $.ajax({ 
              type: "GET", url: minorPropCode+".xml", dataType: "xml", 
              success: function(xml3) { 
               alert("test"); 
               $("#"+minorPropCode+"minorModule").find(".minorPropLogo").attr(
                { 
                 src:$(xml3).find('smallImage').text(), 
                 alt:$(xml3).find('smallImageAlt').text() 
                } 
               ); 

              } 
             }); 
           }); 
          $("#"+minorId+"minorModuleContainer").append(minorModuleDiv); 
         }); 

문제가있는 라인 "$ (이) .find ('minorProp'). 각 (함수() {" "이"변경 되었기 때문에. 나는에 의해 추측 발생하지 않는다는 점입니다 지금, 내 멍청한 놈이 보이고있다. 내가 잘못된 방법으로이 일을하고 같은 느낌. 어떤 도움을 주시면 감사하겠습니다. 감사합니다.

아래에 배치하는 내가 뭘하려고 오전의 전체의 .js 파일입니다.

// JavaScript Document<script language="JavaScript" type="text/javascript"> 
    $(document).ready(function(){ 
     //gets the code for the ad from the URL. Using URL jQuery add-on to make this super-easy 
     var adCode = $.url.param("adCode"); 
     if (adCode != null){ 
      //gets the ad code's XML file 
      $.ajax({ 
       type: "GET", url: adCode+".xml", dataType: "xml", 
       success: function(xml) { 
        //Set the header image 
        $("#headerImg").attr(
         { 
          src:$(xml).find('headerImage').text(), 
          alt:$(xml).find('headerImageAlt').text() 
         } 
        ); 
        //set the header text 
        $("#headerText").html($(xml).find('adText').text()); 
        //set the top image 
        $("#topImg").attr(
         { 
          src:$(xml).find('topImage').text(), 
          alt:$(xml).find('topImageAlt').text() 
         } 
        ); 
        //MAJOR MODULE CODE - This code reads all of the major modules, then adds a majorModule div, and populates it 
        //Gets all majorProps from ad XML 
        $(xml).find('majorProp').each(function(){ 
         var propCode=$(this).text(); 
         var majorModuleCode = "majorModule.html"; 
         //names the div with a unique ID 
         div = $("<div id='"+propCode+"majorModule' class='majorModule'>"); 
         //Sets loading message in case it takes longer than usual to load 
         div.html("Loading......"); 
         //After majorModule.html code loads, starts populating module 
         div.load(majorModuleCode,"t", 
          function(){ 
           //Get the XML for the prop, which contains prop specific stuff 
           $.ajax({ 
            type: "GET", 
            url: propCode+".xml", 
            dataType: "xml", 
            success: function(xml2) { 
             $("#"+propCode+"majorModule").find(".propImg").attr(
              { 
               src:$(xml2).find('smallImage').text(), 
               alt:$(xml2).find('smallImageAlt').text() 
              } 
             ); 
             $("#"+propCode+"majorModule").find(".propLogoImg").attr(
              { 
               src:$(xml2).find('smallLogo').text(), 
               alt:$(xml2).find('name').text() 
              } 
             ); 
             $("#"+propCode+"majorModule").find(".viewCalendarLinkA").attr(
              { 
               href:"https://www.harrahs.com/AvailabilityCalendar.do?propCode="+propCode+"&showHotDeal=Y" 
              } 
             ); 
             $("#"+propCode+"majorModule").find(".learnMoreLinkA").attr(
              { 
               href:$(xml2).find('homeLink').text() 
              } 
             ); 
             $("#"+propCode+"majorModule").find(".propText").html(
               $(xml2).find('bodyText').text() 
             ); 

            } 
           }); 
           //Get the lowest rate for the prop 
           $.ajax({ 
            type: "GET", 
            url: "lowest_rate\\"+propCode+".xml", 
            dataType: "xml", 
            success: function(xml3) { 
             $("#"+propCode+"majorModule").find(".roomRate").html(
               "$"+($(xml3).find('roomtype').filter(
                function (index) { 
                 return $(this).attr("lowest") == "Y"; 
                }).text()).slice(0, -3) 
             ) 
            } 
           }); 
          } 
         ); 
         $("#mainModuleContainer").append(div); 
        }); 
        //MINOR MODULE CODE 
        $(xml).find('minorPropCategory').each(function(){ 
         var minorHeader=$(this).attr("title"); 
         var minorId=$(this).attr("title").replace(/ /g,''); 
         var minorModuleContainerCode = "minorModuleContainer.html"; 
         //names the div with a unique ID 
         minorDiv = $("<div id='"+minorId+"minorModuleContainer' class='minorModuleGroupContainer'>"); 
         //Sets loading message in case it takes longer than usual to load 
         minorDiv.html("Loading......"); 
         //After minorModuleContainerCode.html code loads, starts populating module 
         minorDiv.load(minorModuleContainerCode,"t", 
          function(){ 
           $("#"+minorId+"minorModuleContainer").find(".minorModuleHeader").html(minorHeader); 

          } 
         ); 
         $("#minorModuleContainer").append(minorDiv); 
         //Create the actual minor modules 
         $(this).find('minorProp').each(function(){ 
          var minorPropCode = $(this).text(); 
          var minorModuleCode = "minorModule.html"; 
          minorModuleDiv = $("<div id='"+minorPropCode+"minorModule' class='minorModule'>"); 
          minorModuleDiv.html("Loading......"); 
          minorModuleDiv.load(minorModuleCode,"b", 
          function(){ 
           $.ajax({ 
            type: "GET", url: minorPropCode+".xml", dataType: "xml", 
            success: function(xml3) { 
             $("#"+minorPropCode+"minorModule").find(".minorPropLogo").attr(
              { 
               src:$(xml3).find('smallImage').text(), 
               alt:$(xml3).find('smallImageAlt').text() 
              } 
             ); 

            } 
           }); 
          }); 
          $("#"+minorId+"minorModuleContainer").append(minorModuleDiv); 
         }); 
        }); 



       } 
      }); 
     } 
    }); 

답변

1

minorDiv.load을 실행하기 직전에이 문제를 해결하려면

var elem = $(this); 
minorDiv.load(minorModuleContainerCode,"t", function(){ 
    $("#"+minorId+"minorModuleContainer").find(".minorModuleHeader"). 
     html(minorHeader); 

    // replace $(this) with elem here 
    elem.find('minorProp').each(function(){ 
     ... 
    } 

    ... 
} 

이렇게하면 중첩 된 함수의 올바른 개체에 대한 참조가 유지됩니다.