動的ページを、固定せずに変更するには？（他のページに影響が内容に変更する。）
- 評価
- クリップ 0
- VIEW 922
退会済みユーザー
https://teratail.com/questions/12677の続きです。
その後JQUERYのcssメソッドを使い編集した所、JQUERYのcssメソッドは、要素を直接いじっているので、
他のページも変更されるといわれてしまいました。
下記が一部抜粋です。
＞＞＞＞
beforeメソッドで固定化されているため、
他のページを開いても同じテキストが表示されてしまいます。
また、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいかと思います。
それぞれのメソッドの違いについては下記のリファレンスサイト等を参考にご自身でお調べ下さいませ。
http://semooh.jp/jquery/api/manipulation/insertBefore/content/
http://semooh.jp/jquery/api/manipulation/before/content/
どのメソッドが固定かどうかという情報がなく、どれを使えるのかがわかりません。
結果からすると、前にいただいた回答は間違っていたということでしょうか？
・追加情報
＞JQUERYのcssメソッドは、
.css("background-color");などごく一般的なJQUERYでのCSS指定です。
他にcolor、font-sizeなども使いました。
要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのがよいと言われているのですが、
この二つのメソッドは、片方がDOM操作で片方はそうでない（固定されてしまう）という決定的な違いがあるようです。
ここの部分をどう思われますか？
DOM操作系のメソッド一覧があり、ここのメソッドであれば、動的サイトでも使えるという事でしたら、非常にわかりやすいのですが、
どこが信頼できるのか判断が難しいです。
下記のようなサイトは見つかるのですが、
例えば、下記のサイトなら、jQueryによるDOM操作をまとめてみたの中に、3. 要素の挿入(after, insertAfter, before, insertBefore)という記載があります。
ただし先方のメールには、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいとあります。
つまり、 before, insertBeforeは、DOM操作系かそうでないかの、違いがあるはずなのに、同じページ内で紹介されていて区別がつきません。
http://ruby-rails.hatenadiary.com/entry/20150331/1427809820#jquery-dom-after
・HTMLは、いわゆる一般的な会員制の大手サイトと同じです。
コンプライアンスがあるので、残念ながらここのサイトとは記載できませんが、例えばホトッペーパーやグルナビなど、沢山のお店が情報を登録し、店の情報だけが変わり骨組みは皆同じという形のサイトです。
デブツール上では、普通のHTMLに見えます。処理された結果しか見れないので当たり前かもしれませんが。
動的サイトの件で、再度質問した所下記の回答を頂きました。
下記回答
ここでおっしゃる「直接HTMLを変更できない」というのは、動的に変更される要素をreplaceWithやtextなどで変更したい画像や文言にできないということでよろしいでしょうか？
上記の認識でよろしければ、この変更は不可になりますので、要素の位置を移動したり、レイアウトを変更したりなどの編集のみにしてください。
もし、要素の移動などを行いたいという場合は例えば、
=====
//動的箇所をid="test2"の要素の上に移動させたい。
<div id="test1">
<div>この内容が動的箇所です。</div>
</div>
<div id="test2"></div>
//id="test1"の中にあるdivをid="test2"の要素の上に移動する。
$("#test1 > div").insertBefore("#test2");
//動的箇所の内容を固定化することなく、id="test2"の要素の上に移動することができる。
<div id="test1"></div>
<div>この内容が動的箇所です。</div>
<div id="test2"></div>
=====
その他にも
=====
//動的箇所をid="test2"の要素の中に移動させたい。
<div id="test1">
<div>この内容が動的箇所です。</div>
</div>
<div id="test2"></div>
//id="test1"の中にあるdivをid="test2"の要素の中に移動する。
$("#test1 > div").prependTo("#test2");
//動的箇所の内容を固定化することなく、id="test2"の要素の中に移動することができる。
<div id="test1"></div>
<div id="test2">
<div>この内容が動的箇所です。</div>
</div>
=====
上記では、insertBefoerとprependToを参考にご案内致しましたが、
他にもinsertAfterとappendToなど同じような処理でも少し異なる処理を行うメソッドもございます。
その後JQUERYのcssメソッドを使い編集した所、JQUERYのcssメソッドは、要素を直接いじっているので、
他のページも変更されるといわれてしまいました。
下記が一部抜粋です。
＞＞＞＞
beforeメソッドで固定化されているため、
他のページを開いても同じテキストが表示されてしまいます。
また、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいかと思います。
それぞれのメソッドの違いについては下記のリファレンスサイト等を参考にご自身でお調べ下さいませ。
http://semooh.jp/jquery/api/manipulation/insertBefore/content/
http://semooh.jp/jquery/api/manipulation/before/content/
どのメソッドが固定かどうかという情報がなく、どれを使えるのかがわかりません。
結果からすると、前にいただいた回答は間違っていたということでしょうか？
・追加情報
＞JQUERYのcssメソッドは、
.css("background-color");などごく一般的なJQUERYでのCSS指定です。
他にcolor、font-sizeなども使いました。
要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのがよいと言われているのですが、
この二つのメソッドは、片方がDOM操作で片方はそうでない（固定されてしまう）という決定的な違いがあるようです。
ここの部分をどう思われますか？
DOM操作系のメソッド一覧があり、ここのメソッドであれば、動的サイトでも使えるという事でしたら、非常にわかりやすいのですが、
どこが信頼できるのか判断が難しいです。
下記のようなサイトは見つかるのですが、
例えば、下記のサイトなら、jQueryによるDOM操作をまとめてみたの中に、3. 要素の挿入(after, insertAfter, before, insertBefore)という記載があります。
ただし先方のメールには、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいとあります。
つまり、 before, insertBeforeは、DOM操作系かそうでないかの、違いがあるはずなのに、同じページ内で紹介されていて区別がつきません。
http://ruby-rails.hatenadiary.com/entry/20150331/1427809820#jquery-dom-after
・HTMLは、いわゆる一般的な会員制の大手サイトと同じです。
コンプライアンスがあるので、残念ながらここのサイトとは記載できませんが、例えばホトッペーパーやグルナビなど、沢山のお店が情報を登録し、店の情報だけが変わり骨組みは皆同じという形のサイトです。
デブツール上では、普通のHTMLに見えます。処理された結果しか見れないので当たり前かもしれませんが。
動的サイトの件で、再度質問した所下記の回答を頂きました。
下記回答
ここでおっしゃる「直接HTMLを変更できない」というのは、動的に変更される要素をreplaceWithやtextなどで変更したい画像や文言にできないということでよろしいでしょうか？
上記の認識でよろしければ、この変更は不可になりますので、要素の位置を移動したり、レイアウトを変更したりなどの編集のみにしてください。
もし、要素の移動などを行いたいという場合は例えば、
=====
//動的箇所をid="test2"の要素の上に移動させたい。
<div id="test1">
<div>この内容が動的箇所です。</div>
</div>
<div id="test2"></div>
//id="test1"の中にあるdivをid="test2"の要素の上に移動する。
$("#test1 > div").insertBefore("#test2");
//動的箇所の内容を固定化することなく、id="test2"の要素の上に移動することができる。
<div id="test1"></div>
<div>この内容が動的箇所です。</div>
<div id="test2"></div>
=====
その他にも
=====
//動的箇所をid="test2"の要素の中に移動させたい。
<div id="test1">
<div>この内容が動的箇所です。</div>
</div>
<div id="test2"></div>
//id="test1"の中にあるdivをid="test2"の要素の中に移動する。
$("#test1 > div").prependTo("#test2");
//動的箇所の内容を固定化することなく、id="test2"の要素の中に移動することができる。
<div id="test1"></div>
<div id="test2">
<div>この内容が動的箇所です。</div>
</div>
=====
上記では、insertBefoerとprependToを参考にご案内致しましたが、
他にもinsertAfterとappendToなど同じような処理でも少し異なる処理を行うメソッドもございます。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
0
質問の回答ありがとうございます。
before も insertBefore もDOMの挿入をするDOMを操作するメソッドです。違いはありません。
で思ったのですが、 before というのはjQueryのメソッドでは無く、 CSSに記述する before と勘違いされているのではないでしょうか？
http://www.htmq.com/selector/before.shtml
before も insertBefore もDOMの挿入をするDOMを操作するメソッドです。違いはありません。
で思ったのですが、 before というのはjQueryのメソッドでは無く、 CSSに記述する before と勘違いされているのではないでしょうか？
http://www.htmq.com/selector/before.shtml
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
質問への追記・修正、ベストアンサー選択の依頼
takutok
2015/07/23 13:34
要素をbeforeで固定するというのがよくわからないです。 > JQUERYのcssメソッドは、要素を直接いじっているので、他のページも変更されるといわれてしまいました。 というのは具体的にどのようなHTMLとJavaScriptだったのでしょうか。 やりたいことをHTMLを交えて具体的に質問していただけると回答しやすいです。
退会済みユーザー
2015/07/23 15:35
＞JQUERYのcssメソッドは、 .css("background-color");などごく一般的なJQUERYでのCSS指定です。 他にcolor、font-sizeなども使いました。 要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのがよいと言われているのですが、 この二つのメソッドは、片方がDOM操作で片方はそうでない（固定されてしまう）という決定的な違いがあるようです。 ここの部分をどう思われますか？ DOM操作系のメソッド一覧があり、ここのメソッドであれば、動的サイトでも使えるという事でしたら、非常にわかりやすいのですが、 どこが信頼できるのか判断が難しいです。 下記のようなサイトは見つかるのですが、 例えば、下記のサイトなら、jQueryによるDOM操作をまとめてみたの中に、3. 要素の挿入(after, insertAfter, before, insertBefore)という記載があります。 ただし先方のメールには、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいとあります。 つまり、 before, insertBeforeは、DOM操作系かそうでないかの、違いがあるはずなのに、同じページ内で紹介されていて区別がつきません。 http://ruby-rails.hatenadiary.com/entry/20150331/1427809820#jquery-dom-after