jQueryでのマークアップ書き換えについて

こんにちは、javascript初心者です。
現在、html5とjavascriptで画像ビューワーを制作しています。ブラウザのウィンドウサイズ変更を監視し、ヨコ長の時は2ページ（見開き）レイアウトに、タテ長の時は1ページレイアウトになるよう、マークアップの切り替えで実装しようと考えています。
下記の様な感じです。

【ヨコ長の時】※articleで画像2枚を囲む

【タテ長の時】※articleで画像1枚を囲む

insertBeforeやinsertAfte、appendやremoveなどの関数の組み合わせで
実現しようとしたのですが、私のjsの知識が未熟なため
余分なマークアップが入ったりして、なかなか思うような動きになりません。

どのようなコードを書けば上記を実現できますでしょうか。
皆さまのお知恵をお借りできますと幸いです。

よろしくお願いします。

行動規範の内容に同意します

回答1件

それらの要素の外側にひとつdivを追加すると楽かと思います。

HTML
1<div id="article_div">
2     <article class="page"> 
3           <div class="left"><img src="page1.jpg" id="page1"></div> 
4           <div class="right"><img src="page2.jpg" id="page2"></div> 
5     </article> 
6</div>

HTMLを上記のようにして、次のようにしてみてはいかがでしょうか。

javascript
1$(window).on("resize", function(e){
2    var winWidth = $(window).width();
3    var winHeight = $(window).height();
4    //左の要素
5    var leftImg = $(".page > .left");
6    //右の要素
7    var rightImg = $(".page > .right");
8
9    $("$article_div").empty(); //divを空に
10
11    //要素を追加
12    if(winWidth >= winHeight){
13        $("$article_div").append($("<article/>", {class : "page"}).append(leftImg).append(rightImg));
14    } else {
15        $("$article_div").append($("<article/>", {class : "page"}).append(leftImg));
16        $("$article_div").append($("<article/>", {class : "page"}).append(rightImg));
17    }
18});

突貫で考えたため、動作未検証です。ご容赦ください。

投稿2015/10/02 09:26

orange0190

総合スコア1698

garirewo

2015/10/02 09:50

ShunsukeIzui様ご回答いただき、ありがとうございます！まさにこの数日、求めていた答えになりそうです。参考にさせていただきます。

garirewo

2015/10/03 15:54

ShunsukeIzui様丁寧なご回答、ありがとうございます。上記のコードで、ここ数日苦戦していたコーディングが一気に進みました^^ ただもう一点、appendで書きだした要素の中にimg要素を挿入するところで悩んでいます。元からあるimgタグを一旦変数に格納して、LeftImg、RightImgの間に挟んで書きだしたいのですが、うまくいかず・・私の拙い知識で、下記のように考えているのですが、いかがでしょうか。 var RightImage = document.getElementByClassName('right').child(); var rightImg = $(".page > .right").innerHTML="RightImage"; 恐らく文法的に間違っていると思いますので、ご指摘をいただけますと幸いです。何卒、よろしくお願いいたします。

garirewo

2015/10/04 08:02

申し訳ありません、ちょっと難しく考えすぎていたようです。シンプルに、getElementByClassNameで <div class="right">～</div>のセレクタを選び、その前に文字列として ”</article><article class="page">” を挿入するということは、可能でしょうか。厚かましくて恐縮ですが、お教えいただけますと嬉しいです！