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にコンテンツを配置する場合に問題に
感謝
「正確にはうまくいかない」とはどういう意味ですか? – j08691
@ j08691つまり、1つのdivのように2つ以上の '.link'を1つのdivに入れたいと思っています。しかし時には新しいdivに '.link'を1つだけラップします –