質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • jQuery

    6926questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Webサイト

    1099questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

動的ページを、固定せずに変更するには?(他のページに影響が内容に変更する。)

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 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など同じような処理でも少し異なる処理を行うメソッドもございます。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 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

    キャンセル

回答 1

0

質問の回答ありがとうございます。
before も insertBefore もDOMの挿入をするDOMを操作するメソッドです。違いはありません。

で思ったのですが、 before というのはjQueryのメソッドでは無く、 CSSに記述する before と勘違いされているのではないでしょうか?
http://www.htmq.com/selector/before.shtml


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/24 16:47

    両方とも、固定させることは無い、メソッドなのですね。
    動的サイトで使っても他のページにも影響が出ることが無いメソッドなのですね。

    CSSの擬似要素と間違えたということはさすがにありません。
    両方とも間違いなくjQueryのメソッドです。

    先方が言うにはこの二つのメソッドは、決定的に違うそうです。

    キャンセル

  • 2015/07/24 16:49

    お忙しい中ご回答ありがとうございます。


    下記のコメントを見ていただくと、CSSの事を言っていない事がわかると思います。

    >>>
    それぞれのメソッドの違いについては下記のリファレンスサイト等を参考にご自身でお調べ下さいませ。
    http://semooh.jp/jquery/api/manipulation/insertBefore/content/
    http://semooh.jp/jquery/api/manipulation/before/content/

    キャンセル

  • 2015/07/24 17:01

    横から失礼いたします。
    takutokさんが仰っているように違いはないと思います。
    下記サイトにもその旨書かれています。
    http://js.studio-kingdom.com/jquery/manipulation/insert_before

    javascriptはあくまでもクライアント側なので、ajaxで通信が発生して内部でCSSの値の書き換えが行われない限り、他のページに影響が出るというのは考えられません。

    キャンセル

  • 2015/07/31 14:31

    ありがとうございます。

    ajaxを使わない限りJSは、HTMLを読み込んだ後クライアントサイドで実行されるので、他のページに影響を与える事は理論上ありえないということで、よろしいでしょうか?

    キャンセル

  • 2015/07/31 14:40

    ただし先方のメールには、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいとあります。

    どうもメソッドによって違いがあるといっているようです。
    私の知識不足でこのあたりをどう質問していけば、どのメソッドであればOKなのか確認できるのですが、もしよろしければこのように質問してみてはと教えていただけませんでしょうか?

    また始めの質問に返答の追記をしました。

    キャンセル

関連した質問

同じタグがついた質問を見る

  • jQuery

    6926questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Webサイト

    1099questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。