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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

510閲覧

親div内の子divの取得方法

LBciel.

総合スコア18

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/05 09:53

編集2020/07/05 10:09

教えて頂きたい内容

htmlの親div内の子div(bf1内のboxb)の指定方法(取得方法?)を教えて頂きたい。

boxacssでボタンの状態にしており、各項目のboxaをクリックするとその項目のboxb~boxfを各々exp1~exp5加算するというものを作成しています。

html

1<div id="panel2" class="tab_panelP"> 2 <div class="bf1"> 3 <div class="boxa">打撃</div> 4 <div class="boxb">10</div> 5 <div class="boxc">0</div> 6 <div class="boxd">16</div> 7 <div class="boxe">0</div> 8 <div class="boxf">6</div> 9 </div> 10 <div class="bf5"> 11 <div class="boxa">守備</div> 12 <div class="boxb">0</div> 13 <div class="boxc">11</div> 14 <div class="boxd">17</div> 15 <div class="boxe">0</div> 16 <div class="boxf">11</div> 17 </div> 18 <div class="bf7"> 19 <div class="boxa">総合</div> 20 <div class="boxb">10</div> 21 <div class="boxc">10</div> 22 <div class="boxd">10</div> 23 <div class="boxe">0</div> 24 <div class="boxf">3</div> 25 </div> 26</div> 27 28<div class="EXP"> 29 <div class="mini2"> 30 <div id="exp1" class="box1">0</div> 31 <div id="exp2" class="box2">0</div> 32 <div id="exp3" class="box3">0</div> 33 <div id="exp4" class="box4">0</div> 34 <div id="exp5" class="box5">0</div> 35 </div> 36</div>

悩んでいる事

Pythonでいうfind_allでdiv内取得して、必要な項目をselect_one().textで抜き出して書き込めば良いのだろうなぁ…ということはわかるのですが、javascriptの場合はどうすればよいのかわからずこちらを利用させていただきました。

現時点では、**parseInt((document.getElementById('se' + i).textContent));**を使用して取得を試みているのですが、どうも1つだけの様で困っています。

もし、このやり方ではなくて、他に良い(効率の良い)やり方があるのであれば教えて頂ければ幸いです。

環境

windows10
VScode

javascriptの参考書を読み始めて4日目くらいなので、余計な事まで教えて頂けると喜びます。

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

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

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

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

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

guest

回答2

0

ベストアンサー

jqueryですが、自分の要素と同じ階層にある要素を取得する関数として、next,nextAll,siblings等があります。
例えば、boxaをクリックした際に同じ階層の続きのdivを全て取得するにはnextAllを使います。

javascript

1$(".boxa").on('click',function(){ 2 boxes = $(this).nextAll('div'); //boxb-boxfまで入っている 3});

他の関数もgoogle検索するとすぐ使い方がわかりますので探してみてください。

投稿2020/07/05 10:06

hope_mucci

総合スコア4447

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

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

LBciel.

2020/07/05 10:15

素早いご回答有難う御座います! どの様な違いがあるのか調べ、各々試してみたいと思います。おそらくhope_mucciさん想定通りのnextAllになりそうです!
guest

0

jqueryを使用した形は他の方が回答しているので、jqueryを使わない形の方を回答しますね。
現時点の要素を変数docに入れている場合は、

doc.parentNode.children;

にて取得することが出来ます。

js

1//doc = "打撃"と記載されたノード 2var a = doc.parentNode.children; 3for(i = 0; i < a.length; i++){ 4 console.log(a[i].innerHTML); 5} 6//"打撃" 7//"10" 8//"0" 9//"16" 10//"0" 11//"6"

ライブラリを使わない素のJavaScriptでDOM操作

投稿2020/07/05 10:18

yuuyu

総合スコア1135

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

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

yuuyu

2020/07/05 10:19

書いてる間に解決済みになってましたね。。 参考程度に、ということで…
LBciel.

2020/07/05 10:39

ご回答有難う御座います! javascriptを勉強しておりましたので、非常に勉強になります! .parentNode.children;という内容はいろいろなサイトを拝見していましたが見たことがありませんでした。詳しく調べてみたいと思います。有難う御座います! 今回は先にご回答いただいた方をベストアンサーとさせていただきました…お時間頂きまして申し訳ございません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問