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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

1回答

937閲覧

wrapの使い方について

free_teku

総合スコア103

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2021/09/18 06:34

編集2022/01/12 10:55

前提・実現したいこと

JSを使って、humbergerをクリックした時に、下記のul,liなどを追加するようなコードを書こうと考えています。 すでに動いているかどうか確認ができず質問しました。 内容は 確認方法と正しいコードをかけているか、 「wrapの使い方としてセレクタの前後に付与=すでにある親要素や子要素にclassを付与できない認識が正しい」 のかについてです。 ※HTMLにはすでに「bg-li_white」はすでに書いています。 ※jqについてすでに調べ書いていますが、気になり質問しています。

該当のソースコード

HTML

1<header class="header"> 2 <div class="inner header-inner"> 3 <h1 class="header-ttl"> 4 <img class="img-logo" src="./image/Logo.png" alt=""> 5 <p class="logo-text">ユアコーディング</p> 6 </h1><!-- /.header-ttl --> 7 <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する"> 8 <span class="humburger__line"></span> 9 10 </button> 11 <nav class="nav"> 12 <ul class="header-list"> 13 <li class="header-item"><a href="#">特徴</a></li><!-- /.header-item --> 14 <li class="header-item"><a href="#">価格</a></li><!-- /.header-item --> 15 <li class="header-item"><a href="#contact-link">問い合わせ</a></li><!-- /.header-item --> 16 </ul><!-- /.header-list --> 17 </nav><!-- /.nav --> 18 <div class="cmn-link header-link"> 19 <a href="#contact-link">お問い合わせ</a> 20 </div><!-- /.cmn-link --> 21 </div><!-- /.inner --> 22 </header><!-- /.header --> 23 <div class="bg-li_white"> 24 <div class="menu-li_open"> 25 <ul class="menu-list"> 26 <li class="menu-item"></li> 27 <li class="menu-item"></li> 28 <li class="menu-item"></li> 29 </ul> 30 </div> 31 </div><!-- /.bg-li_white -->

CSS

1.header { 2 background-color: #FFFFFF; 3 height: 94px; 4 position: fixed; 5 top: 0; 6 z-index: 9999; 7 width: 100%; 8 -webkit-box-shadow: 0px 3px 6px #00000029; 9 box-shadow: 0px 3px 6px #00000029; 10} 11 12.header .header-inner { 13 width: 1022px; 14 margin: 0 auto; 15 padding: 0 20px; 16 display: -webkit-box; 17 display: -ms-flexbox; 18 display: flex; 19 -webkit-box-align: center; 20 -ms-flex-align: center; 21 align-items: center; 22 -webkit-box-pack: justify; 23 -ms-flex-pack: justify; 24 justify-content: space-between; 25 height: 100%; 26} 27 28.header .header-inner .header-ttl { 29 display: -webkit-box; 30 display: -ms-flexbox; 31 display: flex; 32 -webkit-box-align: center; 33 -ms-flex-align: center; 34 align-items: center; 35} 36 37.header .header-inner .header-ttl .img-logo { 38 width: 55px; 39 height: 55px; 40} 41 42.header .header-inner .header-ttl .logo-text { 43 display: block; 44 font-size: 2.4rem; 45 font-weight: bold; 46 margin-left: 16px; 47} 48 49.header .header-inner .humburger__line { 50 display: none; 51} 52 53@media print, screen and (max-width: 1024px) { 54 .header .header-inner .humburger__line { 55 position: absolute; 56 top: 0; 57 right: 0; 58 bottom: 0; 59 left: 0; 60 margin: auto; 61 width: 18px; 62 height: 2px; 63 background-color: #333; 64 -webkit-transition: inherit; 65 transition: inherit; 66 } 67 .header .header-inner .humburger__line ::before { 68 top: -5px; 69 } 70 .header .header-inner .humburger__line ::after { 71 top: 5px; 72 } 73} 74 75.header .header-inner .nav .header-list { 76 display: -webkit-box; 77 display: -ms-flexbox; 78 display: flex; 79 -webkit-box-pack: justify; 80 -ms-flex-pack: justify; 81 justify-content: space-between; 82 -webkit-box-align: center; 83 -ms-flex-align: center; 84 align-items: center; 85} 86 87.header .header-inner .nav .header-list .header-item > a { 88 font-weight: bold; 89} 90 91.header .header-inner .nav .header-list .header-item + .header-item { 92 padding-left: 46px; 93} 94 95.header .header-inner .nav .header-link { 96 width: 155px; 97 height: 37px; 98} 99 100.header .header-inner .nav .header-link > a { 101 color: #fff; 102 font-size: 1.4rem; 103 text-align: center; 104}

js

1$(function(){ 2 3 /* $('#js-humberger').on('click', function(){ 4 $('#js-nav').slideToggle(300); 5 }) */ 6 $('.button').on('click',function(){ 7 //bg-li_whiteの親要素付与 8 $('.bg-li_white').wrapInner(' <div class="menu-li_open">') 9 $(".bg-li_white").wrapInner('<ul class="menu-list"></ul>') 10 $('menu-item').wrapAll('<ul class="menu-list"></ul>')

試したこと

wrap

wrapAll

wrapInner

調べ、実際にコードを書いています。

ご指導いただけると幸いです。何卒よろしくお願いいたします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

確認方法

wrapメソッドが動作していることの確認の方法という理解でいいでしょうか?
開発者ツールを開き、適切に要素が生成されているかを観察するとよいでしょう。
Elementsタブで要素を右クリックすると、要素の変更に対してブレークポイントを設定できるので、それで確認してもいいかもしれないです。


正しいコードをかけているか

エラーは出ていないようです。
想定通りに動作しているかどうかについては、 第三者よりもfree_tekuさんの方がわかることかと思います。
ただ、挿入されている要素によってHTMLの文法違反となっているので、そういう意味では正しくないと思います。


「wrapの使い方としてセレクタの前後に付与=すでにある親要素や子要素にclassを付与できない認識が正しい」

前段は「wrapメソッドが、そのjQueryオブジェクトが指す要素の前後に開始タグと終了タグを挿入する」という意味でしたら、おおむねご認識の通りです。
後段は「wrapメソッドが、すでにある親要素や子要素のclass属性を変化させない」という意味でしたら、ご認識の通りです。


なお、ご存知の上でのご質問かと思いますが念のため、ご提示のコードではwrapメソッドは使われていないようでした。
また、コメントされている「bg-li_whiteの親要素付与」という内容と、実際の動作が異なるように見えること、$('menu-item')が存在しないこと、などが気になりました。

投稿2021/09/18 08:36

編集2021/09/18 08:55
Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

free_teku

2021/09/18 23:10

Lhankor_Mhyさん、ご回答ありがとうございます。 EX.bg-li_whiteのみをHTMLに書きその後を上記のように書く場合は、 $('.bg-li_white').wrapInner(' <div class="menu-li_open">'); $(".menu-li_open").wrapInner('<ul class="menu-list"></ul>'); $('.menu-list’).prepend('<li class="menu-item"></li>'); $('.menu-list’).append('<li class="menu-item"></li>', '<li class="menu-item"></li>'); 上記の書き方はよろしいでしょうか? 恐れ入りますが、よろしくお願いいたします。
Lhankor_Mhy

2021/09/21 02:15

たぶん、期待した動作をするんじゃないかと思いますが、ご自分で試した方が早くないですか? 何かご不明の点がありますか?
free_teku

2021/09/21 02:31

結論、試しましたが、うまくいきませんでした!これから仕事のため、本日の夜に内容を更新します。伝え足らずで、申し訳ありません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問