2012-04-13 5 views
0

私はこのようなxmlファイルがあります:私はid='contact'と私のhtmlファイル内のdivを持っていると私は私のhtmlでのdivに私のxmlファイルからデータを抽出したいので、私は<post>を選択しますJQuery&Html:JQueryでDIVを動的に別のものにラップする方法

<posts> 
    <post id="123"> 
     <title>UN meets on North Korean missile launch - </title> 
     <link>index2.htm</link> 
    </post> 
    <post id="124"> 
     <title>UN meets on North Korean missile launch - </title> 
     <link>index2.htm</link> 
    </post> 
</posts> 

xmlそれから<link>タグを抽出し、このdivの幅がページ幅に等しいときに、<div class="line">が閉じ、<link>の残りが最も生成される新しい<div class="line">に追加一行<div class="line">でそれらのすべてのいくつかを置くからタグ。

<div id="container"> 

<div id="top-nav"> 
    <ul> 
     <li><a href="#">Website.com</a></li> 
     <li><a href="#">About Me</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Abilities</a></li> 
     <li><a href="#">Ideas</a></li> 
    </ul> 
</div> 

<div id="content"> 
<!-- Content Will Goes Here! --> 
</div> 

<div id="bottom-nav"> 
    <ul> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Branches</a></li> 
     <li><a href="#">Jobs</a></li> 
     <li><a href="#">Privacy Policy</a></li> 
     <li><a href="#">Publishs</a></li> 
    </ul> 
</div> 

</div> 

私はこのようなJQueryでこれをしたい:

$(document).ready(function() { 

    $.ajax({ 
     type:"GET", 
     url:"posts.xml", 
     dataType:"xml", 
     success:function(xml){ 

      var line = '<div class="line"></div>'; 
      $(line).appendTo('#content'); 
      $(xml).find('post').each(function(index, element) { 

       var postLink = $(element).find('link').text(); 
       var postFont = $(element).find('font').text(); 

       var Link = ''; 
       Link += '<div class="link '+postFont+'"><a href="'+postLink+'">'; 
       Link += $(element).find('title').text(); 
       Link += '</a></div>'; 

       var lastLine = $('.line')[$('.line').length-1]; 
       var lineHeightBefore = parseInt($(lastLine).css('height')); 
       //alert(lineHeightBefore); 
        console.log(lineHeightBefore); 
       $(Link).appendTo(lastLine); 
       var lineHeightAfter = parseInt($(lastLine).css('height')); 

       if(lineHeightAfter > lineHeightBefore){ 
        $('.link').last().remove(); 
        $(line).appendTo('#content'); 
        lastLine = $('.line')[$('.line').length-1]; 
        $(Link).appendTo(lastLine); 
       } 

      }); 

     } 
    }); 
}); 

しかし、それはうまく動作しません。
あなたがそのDIVにコンテンツを配置する場合に問題に
感謝

+1

「正確にはうまくいかない」とはどういう意味ですか? – j08691

+0

@ j08691つまり、1つのdivのように2つ以上の '.link'を1つのdivに入れたいと思っています。しかし時には新しいdivに '.link'を1つだけラップします –

答えて

1

を見つけるために私のコードを参照してテストしてください。

$( "#content").html(あなたがここにほしいと思うもの);

ex。 $( "#content").html( "some stuff");