jQueryのeachを使用した時にresizeが効きません。

Question

【目的】
各pタグ毎に効かせたいのでeachを使っています。
・ウィンドウサイズが640より大きければprependToを使い、小さければapendToを使いたいです。
・ロード時、リサイズ時、どちらも対応したいです。

【背景】
・wordpressから出力された時にpタグがdivに内包される仕様があり、そのdivの次のimg要素をdivの中に入れてやる必要がありました。ブラウザ上のリサイズ時にもリアルタイムで反映させたいのです。

現在下記のようなソースにしています。

var windowSize = window.innerWidth;
var switchPoint = 640;

$(window).on('load resize',function(){

$('#content p').each(function(i){
  if(windowSize > switchPoint){
    $(this).parent('div').next('img').prependTo($(this).parent('div'));
  }else{
    $(this).parent('div').next('img').apendTo($(this).parent('div'));
  }
});

});

each無しであれば正常に動くのですが、eachを使うとうまく動いてくれません。

よろしくお願いいたしますm(__)m

【①追記】

情報不足で申し訳ございません！

HTMLは下記のように変化してほしく思います。

通常

<div id="content">

<div>
  <p></p>
</div>
<img src="">

</div>

ウィンドウサイズが640px以上の場合

pを内包しているdivの次のimg要素をpの前に移動。

<div id="content">

<div>
  <img src="">
  <p></p>
</div>

</div>

ウィンドウサイズが640px以下の場合

pを内包しているdivの次のimg要素をpの後に移動。

<div id="content">

<div>
  <p></p>
  <img src="">
</div>

</div>

尚、コンソールエラーは確認してみたところありませんでした。

Comments

[kei344]

「うまく動いてくれません」とありますが、どうあって欲しいものが、どのようになっていて、コンソールにエラーなどが出ているかどうかなど詳細にお願いします。

[think49]

「通常」のHTMLはjs-off時の場合を意図した必要なマークアップでしょうか。ほとんどの環境で640px以上でしょうから初めから640pxの場合でマークアップしておけば良いと思いました。js-off時だけHTMLをスイッチしたいならわかりますが…。それから、"#newsImgTarget p"を表すHTMLがありません。

[退会済みユーザー]

ありがとうございます。
色々情報不足で申し訳ございません＞＜
「通常」のソースはwordpressで吐き出された時にあのような形になることがあり、はじめからマークアップするというのが難しいです。
リサイズはPCブラウザを縮めた時にもリアルタイムで反映させたいです。
HTMLの#contentを追加しました。コンテンツすべてを囲むタグです。newsImgTarget という名前は変更しました。

Answer 1

示されているコードでは、たとえeachがなくても、windowSizeが更新されないためうまく動作しないと思いますが・・・
あまり変わりがないかもしれませんが、以下でどうですか?

var switchPoint = 640;

$(window).on('load resize',function(){
    var windowSize = window.innerWidth;

    $('#newsImgTarget p').each(function(i, e){
        if(windowSize > switchPoint){
            $(e).next('img').prependTo($(e).parent('div'));
        }else{
            $(e).next('img').apendTo($(e).parent('div'));
        }
    });
});

Comments

[退会済みユーザー]

ご回答ありがとうございます。
上記のコード、試してみます！

Answer 2

HTMLが欲しいところですが、windowSize が固定なので resize しても動作が変わっていないようですね。

jQuery(window).on('load resize',function () {
  var windowSize = window.innerWidth;
  var switchPoint = 640;

  jQuery('#newsImgTarget p').each(function (i) {
    if (windowSize > switchPoint) {
      $(this).next('img').prependTo($(this).parent('div'));
    }else{
      $(this).next('img').apendTo($(this).parent('div'));
    }
  });
});

Re: palus さん

Comments

[退会済みユーザー]

ご回答ありがとうございます。
依頼文を修正いたしましたので、もしよろしければご覧くださいませ。

windowサイズを可変させる必要があるんですね?><;

[think49]

HTMLを拝見しました。
基本的にはWordPressで理想となるHTMLを出力し、メディアクエリ+floatで要素位置を入れ替えるのが妥当だと思います。
何らかの事情でそれが難しいのであれば、下記のようにJavaScriptを組みます。

1. 通常のHTMLからdiv要素内にimg要素ノードを挿入
2. resize で要素位置を入れ替える

現在の構成か通常かそうでないかで処理が変わってくるので「1. -> 2.」の順番は保証する必要があります。
script要素を当該要素より後に配置できるのなら1.を即実行して2.をイベント定義すれば良いでしょう。
それが無理なら DOMContentLoaded, resize に 1. の処理を入れて一回でも実行したら .off() して 2. を .on() して下さい。

[退会済みユーザー]

詳しい流れを書いて頂きありがとうございます！＞＜
ようやくイメージがつかめてきました^^;
誠にありがとうございました。