【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?

JavascriptでXMLを読み込み6件ごとに前後HTMLタグを入れたいのですが、
ソースチャートをみると終了HTMLタグが自動的(?)についてきてしまいます。
※1 <div class="ForPagenation" id="page-1"></div>
※2 <div></div>
6件ごとに前後HTMLタグを入れたいのですがどのようにすればいいのか教えてください!
(最終的目標はページネション。6件ごとに<div>タグで囲みたい)


※前提:15件のXMLデータ

$(function(){
$.ajax({
url:'sample.xml',
type:'GET',
dataType:'xml',
timeout:1000,
error:function() {alert("ロード失敗");},
success:function(xml)
{
var pageS = 1; //ページ数

$(xml).find("○○").each(function(i)
{
var me = i+1; //0件スタートではなく1件スタートの件数
var insert = '';

if(me == 1 || me == 7 || me == 15) //1件目、7件目、15件目 //div「ForPagenation」開始
{
insert += '<div class="ForPagenation" id="page-'+pageS+'">'; //※1
}
if($(this).find('××').text() !== '') //XML「××」データが空だとhtmlを作らない
{
insert += '<section class="sampleSection">';
insert += '<div class="sampleBox">';
insert += '<img src="'+$(this).find('imageName').text()+'.png">';
insert += '</div>';
insert += '</section">';
}
if(me == 6 || me == 12 || me == 15) //div「ForPagenation」終了
{
insert += '</div>'; //※2
pageS = pageS + 1;
}
$('#contents').append(insert);
});
}
});
});

質問者からの補足コメント

  • ご教授ありがとうございます。なるほど「配列」ですか!
    ご教授していただいた内容は難しく正しくスクリプト表示が出来ませんでした(もっと勉強せねば!)が質問した方法で一つ一つ表示させるのではなく配列に(hairetsu[me] = insert;)全データを登録した後に、
    if(var i == 1 || i == 7 || i == 13)
     {hairetsu[nnn] = '<div class="ForPagenation" id="page-1">'+hairetsu[nnn];}
    等追加したものの、最初に質問した結果と同じ
    <div class="ForPagenation" id="page-1"></div>
    HTMLタグが自動的(?)についてきてしまいました。
    しかも他jQuery機能が当たってしまうようでした。
    他の方法があれば是非ご教授いただあければ嬉しいです。

    No.1の回答に寄せられた補足コメントです。 補足日時:2015/06/05 20:01

A 回答 (2件)

タグを閉じる前に$('#contents').append(insert);を実行しているのでタグが自動保管されています。



修正方法1:
insertの初期化をeachの前に行い、$('#contents').append(insert);はeachを抜けた後に行う

修正方法2:
insertの初期化をeachの前に行う。1、7、15ページのときはinsert=''を設定
$('#contents').append(insert);を実行するのは6 、12、15ページの時のみ
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
修正法方法1で無事、解決しました!
ご教授していただいたのを見ると、なるほど!と思いました。
本当にありがとうございます。

お礼日時:2015/06/08 23:04

配列化するとページ処理が簡単になると思います。



以下サンプルです。

// 項目ごとに配列化
var sections = $(xml).find("○○").filter(function(){
_ return $(this).find('××').text() !== ''; // 不要な要素は除外
}).map(function(){
_ return '<section class="sampleSection"> ... </section>'; // 要素から文字列に
}).get(); // 文字列の配列に

// 配列をページ単位で出力
var insert = '', PU=6;
for (var index=0, page=1; index < sections.length; index+=PU, page++) {
_ insert += '<div ... id=page-' + page + '>';
_ insert += sections.slice(index, index+PU).join('\n'); // ページ分だけ配列から抜き出し
_ insert += '</div>';
}

$('#contents').append(insert);
この回答への補足あり
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!