teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

ソースコードを編集しました。

2016/04/06 05:21

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -4,6 +4,10 @@
4
4
  ・ロード時、リサイズ時、どちらも対応したいです。
5
5
 
6
6
 
7
+ 【背景】
8
+ ・wordpressから出力された時にpタグがdivに内包される仕様があり、そのdivの次のimg要素をdivの中に入れてやる必要がありました。ブラウザ上のリサイズ時にもリアルタイムで反映させたいのです。
9
+
10
+
7
11
  現在下記のようなソースにしています。
8
12
 
9
13
  ```javascript
@@ -13,7 +17,7 @@
13
17
 
14
18
  $(window).on('load resize',function(){
15
19
 
16
- $('#newsImgTarget p').each(function(i){
20
+ $('#content p').each(function(i){
17
21
  if(windowSize > switchPoint){
18
22
  $(this).parent('div').next('img').prependTo($(this).parent('div'));
19
23
  }else{
@@ -37,21 +41,31 @@
37
41
  HTMLは下記のように変化してほしく思います。
38
42
 
39
43
  **通常**
44
+ ```html
45
+ <div id="content">
40
46
 
41
47
  <div>
42
48
  <p></p>
43
49
  </div>
44
50
  <img src="">
45
51
 
52
+ </div>
53
+ ```
54
+
46
55
  **ウィンドウサイズが640px以上の場合**
47
56
 
48
57
  pを内包しているdivの次のimg要素をpの前に移動。
49
58
 
50
59
  ```html
60
+
61
+ <div id="content">
62
+
51
63
  <div>
52
64
  <img src="">
53
65
  <p></p>
54
66
  </div>
67
+
68
+ </div>
55
69
  ```
56
70
 
57
71
 
@@ -61,10 +75,14 @@
61
75
  pを内包しているdivの次のimg要素をpの後に移動。
62
76
 
63
77
  ```html
78
+ <div id="content">
79
+
64
80
  <div>
65
81
  <p></p>
66
82
  <img src="">
67
83
  </div>
84
+
85
+ </div>
68
86
  ```
69
87
 
70
88
  尚、コンソールエラーは確認してみたところありませんでした。

1

現在のソースの修正。期待するHTMLの形を記述しました。

2016/04/06 05:21

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -15,9 +15,9 @@
15
15
 
16
16
  $('#newsImgTarget p').each(function(i){
17
17
  if(windowSize > switchPoint){
18
- $(this).next('img').prependTo($(this).parent('div'));
18
+ $(this).parent('div').next('img').prependTo($(this).parent('div'));
19
19
  }else{
20
- $(this).next('img').apendTo($(this).parent('div'));
20
+ $(this).parent('div').next('img').apendTo($(this).parent('div'));
21
21
  }
22
22
  });
23
23
 
@@ -27,4 +27,44 @@
27
27
 
28
28
  each無しであれば正常に動くのですが、eachを使うとうまく動いてくれません。
29
29
 
30
- よろしくお願いいたしますm(__)m
30
+ よろしくお願いいたしますm(__)m
31
+
32
+
33
+ 【①追記】
34
+
35
+ 情報不足で申し訳ございません!
36
+
37
+ HTMLは下記のように変化してほしく思います。
38
+
39
+ **通常**
40
+
41
+ <div>
42
+ <p></p>
43
+ </div>
44
+ <img src="">
45
+
46
+ **ウィンドウサイズが640px以上の場合**
47
+
48
+ pを内包しているdivの次のimg要素をpの前に移動。
49
+
50
+ ```html
51
+ <div>
52
+ <img src="">
53
+ <p></p>
54
+ </div>
55
+ ```
56
+
57
+
58
+
59
+ **ウィンドウサイズが640px以下の場合**
60
+
61
+ pを内包しているdivの次のimg要素をpの後に移動。
62
+
63
+ ```html
64
+ <div>
65
+ <p></p>
66
+ <img src="">
67
+ </div>
68
+ ```
69
+
70
+ 尚、コンソールエラーは確認してみたところありませんでした。