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

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

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

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

JavaScript

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

jQuery

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

Q&A

解決済

2回答

900閲覧

javascript(jQuery)でwrapAllができない

teratail969

総合スコア8

foreach

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/06/05 04:33

編集2020/06/05 05:19

タグ埋め込みで実装されるフォームにjavasCriptでデザインを変更したい

一行の埋め込みタグをページ内に配置する事で表示される
問合せフォームのチェックボックスとその横のテキストラベルをまとめ
divで囲み線をつけたいです。

これを
イメージ説明

こうしたい
イメージ説明

htmlはコードから吐き出されるのでいじれないため、javascript(jQuery)で
チェックボックスを全て取得し配列に入れて、そこからforEachで1つずつ
チェックボックス、テキストラベルをidで取得し、
jQueryのwrapAllで<div class='wrapperInner'></div>で囲みたいのですができません。

checkboxArray = Array.from(document.querySelectorAll("input[type='checkbox']")); checkboxArray.forEach(checkbox=>{   var checkboxId = checkbox.id;   var labelId = checkbox.nextElementSibling.id;   $(checkboxId,labelId).wrapAll("<div class='wrapperInner'></div>"); });

forEachのなかでconsole.log(checkboxId)、console.log(labelId)ではちゃんと要素のidは表示されているので
jQuery(checkboxId,labelId)の部分で様子が指定できていないのでしょうか?

イメージ説明

どう修正すれば、期待通り結果になるのでしょうか?
よろしくお願いします

=========追記=========
HTMLがどうなってるかわからないとやりようがないとのことだったので、該当箇所のhtml追記します

<div class="satori__input_group"> <label> お問い合わせ種類(複数選択可) <span class="satori__require"> 必須 </span> </label> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_0_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_0" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="SEOでの集客を増やしたい"> <label for="satori__custom_field_d5c1201f3b679079b_0_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_0_06a4aac8ebce29bd"> SEOでの集客を増やしたい </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_1_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_1" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="サイト内のコンバージョン率を改善したい"> <label for="satori__custom_field_d5c1201f3b679079b_1_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_1_06a4aac8ebce29bd"> サイト内のコンバージョン率を改善したい </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_2_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_2" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="サイトのリニューアルを考えている"> <label for="satori__custom_field_d5c1201f3b679079b_2_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_2_06a4aac8ebce29bd"> サイトのリニューアルを考えている </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_3_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_3" name="custom_field[d5c1201f3b679079b]" type="checkbox" value=" 新規サイトの立ち上げを考えている"> <label for="satori__custom_field_d5c1201f3b679079b_3_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_3_06a4aac8ebce29bd"> 新規サイトの立ち上げを考えている </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_4_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_4" name="custom_field[d5c1201f3b679079b]" type="checkbox" value=" コンテンツ制作を依頼したい"> <label for="satori__custom_field_d5c1201f3b679079b_4_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_4_06a4aac8ebce29bd"> コンテンツ制作を依頼したい </label> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_5_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_5" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="オウンドメディアを立ち上げたい"> <label for="satori__custom_field_d5c1201f3b679079b_5_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_5_06a4aac8ebce29bd"> オウンドメディアを立ち上げたい </label> <br> <br> <input class="satori__custom_field_d5c1201f3b679079b satori__custom_field_d5c1201f3b679079b_06a4aac8ebce29bd satori__custom_field_d5c1201f3b679079b_7_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_7" name="custom_field[d5c1201f3b679079b]" type="checkbox" value="その他"> <label for="satori__custom_field_d5c1201f3b679079b_7_06a4aac8ebce29bd" id="satori__custom_field_d5c1201f3b679079b_7_06a4aac8ebce29bd"> その他 </label> <br> <div class="satori__error_messages"> <span> 入力内容に不備があります </span> <span> お問い合わせ種類(複数選択可)の入力は必須です </span> </div> </div>

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

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

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

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

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

yambejp

2020/06/05 05:00

自動的に吐かれるとはいえHTMLがどうなってるかわからないと やりようがないですね。 ちなみに全部jQueryでやってはだめなんですか?
teratail969

2020/06/05 05:21

HTML追加しました! 全部jQueryでもやりたいことができればいいです! 最初javascriptでやろうと思って居たのですが、wrapAllが使いたかったかったのでjQueryが混ざっただけです
guest

回答2

0

ベストアンサー

こういうことでしょうか?

js

1$("#"+checkboxId+",#"+labelId).wrapAll(...)

投稿2020/06/05 05:46

Lhankor_Mhy

総合スコア36960

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

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

teratail969

2020/06/05 05:55

できました! jQueryで要素の指定がちゃんとできてなかったんですね、、 すごく助かりました!ありがとうございます!
guest

0

javascript

1$(function(){ 2 $('.satori__input_group :checkbox').each(function(){ 3 var wrap=$("<div>").addClass("wrapperInner"); 4 $(this).before(wrap); 5 wrap.append([$(this),$(this).nextAll('label').eq(0),$(this).nextAll('br').eq(0)]); 6 }); 7});

投稿2020/06/05 06:20

yambejp

総合スコア116724

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問