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);
});
}
});
});
No.2ベストアンサー
- 回答日時:
タグを閉じる前に$('#contents').append(insert);を実行しているのでタグが自動保管されています。
修正方法1:
insertの初期化をeachの前に行い、$('#contents').append(insert);はeachを抜けた後に行う
修正方法2:
insertの初期化をeachの前に行う。1、7、15ページのときはinsert=''を設定
$('#contents').append(insert);を実行するのは6 、12、15ページの時のみ
ご回答ありがとうございます。
修正法方法1で無事、解決しました!
ご教授していただいたのを見ると、なるほど!と思いました。
本当にありがとうございます。
No.1
- 回答日時:
配列化するとページ処理が簡単になると思います。
以下サンプルです。
// 項目ごとに配列化
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);
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じIDで定義した要素の配列を...
-
undefinedを表示させない方法は...
-
jspからjavascriptの変数引継ぎ
-
JavaScriptにおける[] とか :...
-
javascriptでの3次元配列のソート
-
配列の格納
-
javascriptからphpに配列データ...
-
大分類・中分類・小分類のvalue...
-
配列データの利用方法
-
JavaScript を使ってpkゲームを...
-
C#OpenCv V4にのエラーに関する...
-
<a>タグのテキストを取得
-
functionから別のfunctionを実...
-
ActiveXobjectが作成できない
-
ジェネレーターの作り方
-
ASP.NET MVCでObjectをjsに渡す
-
window.openでタイトル名の指定
-
翌月を取得するGASが分かりません
-
なぜmatchメソッドがエラーにな...
-
モーダルダイアログウィンドウ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
同じIDで定義した要素の配列を...
-
jspからjavascriptの変数引継ぎ
-
C#テキストボックスの文字を配...
-
二次元配列を使って順位をだす...
-
undefinedを表示させない方法は...
-
javascript 変数名の連結をしたい
-
javascriptで行を抽出したいです。
-
javascriptで入力フォームに日...
-
JavaScriptにおける[] とか :...
-
Perlの配列をJavaScriptに渡せ...
-
HTMLで誕生石と星座をアラート...
-
フォーム入力値の重複チェック
-
WSH(Jscript)でファイル一覧
-
[JS] setAttributeで保存される...
-
オブジェクトから任意のプロパ...
-
読み込んだテキストファイルの...
-
この配列は何?
-
順列生成アルゴリズムについて...
-
textareaに入力されたデータを...
-
JavaScriptからPHPに配列を渡す...
おすすめ情報
ご教授ありがとうございます。なるほど「配列」ですか!
ご教授していただいた内容は難しく正しくスクリプト表示が出来ませんでした(もっと勉強せねば!)が質問した方法で一つ一つ表示させるのではなく配列に(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機能が当たってしまうようでした。
他の方法があれば是非ご教授いただあければ嬉しいです。