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

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

ただいまの
回答率

90.34%

  • JavaScript

    17604questions

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

  • for

    257questions

    for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

  • if

    220questions

    if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

JavaScriptのfor文を使いclassをすべて取得して、空だったら該当の文字列を入れたい

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 493

I_K

score 2

質問があります。
タイトルの通りですが、JavaScriptのfor文を使いclassをすべて取得して、空だったら該当の文字列を入れたいです。

例えば、

var a = document.getElementsByClassName('article')
for(i=0;i<a.length;i++){
console.log(a[i].innerHTML)
}

こちらでarticleというclassにある情報をすべて取得できますが、その中で仮に a[2]が空っぽだった場合
そこにinnerHTMLで 該当の文字列を入れたいです。

該当の文字列とは、別のClassにあるとある文字列です。
もし、var b = document.getElementsByClassName('data')の、 b[4]に該当の文字列、"test" があった場合、
この文字列をarticle[2]に入れたいです。

a[2],b[4]と書きましたが、これは常にa[2],b[4]とは限らないです。常に判断して、空の部分に
該当の文字列を入れたいです。

お手数ですがよろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • coco_bauer

    2018/04/21 10:43

    「とある文字列」とか「常に判断して」とか、具体的に何を意味しているのか判らない言葉が使われているので、I_K さんが何を意図しているのか不明です。 自分勝手な言葉ではなく、回答者が理解できる言葉で説明してください。

    キャンセル

  • 退会済みユーザー

    2018/04/21 11:05

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • x_x

    2018/04/24 18:43

    a[2]にb[4]の文字列を入れる根拠を説明してください。

    キャンセル

回答 1

0

document.addEventListener("DOMContentLoaded", function(){
  "use strict";
  //エレメント単体の処理
  function elemCheck(elem, index){
    const elem_child = elem.children;
    console.log((index + 1) + "個めのエレメントです。");
    //子要素の存在チェック
    if(!elem_child.length){
      console.log("子要素空です");
    }

    //テキストノードの存在チェック
    const text = elem.textContent;

    if(!text){
      console.log("テキストノード空です");
    }else{
      console.log("テキストノードは" + text + "です");
    }
    //テキストノード内容検索
    const txt_str = "検索したい文字";//変更箇所
    const txt_reg = new RegExp(txt_str);
    if((txt_reg).test(text)){
      console.log("テキストノードに「" + txt_str + "」が含まれています");
    }else{
      console.log("テキストノードに「" + txt_str + "」は含まれていません");
    }

    //クラス名チェック
    const cn_str = "検索したいクラス名";//変更箇所
    const cn_reg = new RegExp(cn_str);
    const class_name = elem.getAttribute("class");
    if((/test/).test(class_name)){
      console.log("クラス名「" + cn_str + "」が含まれています");
    }else{
      console.log("クラス名「" + cn_str + "」が含まれています");
    }
    console.log("-----------------------------------------------");
  }

  //クラス名「article」のHTMLエレメント全てを取得しfotEachで順番に処理
  const elem_all = document.querySelectorAll('.article');
  const elems = Array.prototype.slice.call(elem_all,0);
  (function(){
    elems.forEach(function(elem, index){
      elemCheck(elem, index);
    });
  }());
});


どうしたのかが分かりませんでしたので具体的なコード例は挙げられませんでが、エレメントの各パラメータを取得するコードを書きましたのでこれで何とかなるんでは無いかなと思います。

以下質問方法の改善案です。

空っぽ->何が「空っぽ」なのか分からないので具体的に書きましょう。

別のClassにあるとある文字列
->「別のclassに記述している文字列」置き換えた方が読み易いかと思います。また例を挙げるとより伝わり易くなると思います。例:<p>この文字</p>

該当
->別のClassの文字列がどの様に判断されると該当するのかが不明です。「該当」・「その」・「あれ」など省略するような書き方の場合それが何なのか分かりやすく書いた方が良いと思います。

var b = document.getElementsByClassName('data')の
->「クラス名が「data」のエレメントの」と置き換えた方が読み易いかと思います。

b[4]に該当の文字列、"test" があった場合、この文字列を
->ここが恐らく回答者さん皆様が困惑している部分だと思います。

常に判断して->判断条件が分からないので条件を書きましょう。

コーディングの最中でも良いのでそのコードをそのまま載せましょう。また、そのままでは分かりにくい、もしくは内容を伏せたい場合は処理部分を言葉にしたりしたものをあげると良いかもです。

因みに今回の質問に答える際の検索ワードは以下の通りです。
HTML・Javascript・DOM操作・子要素・クラス名・タグ・テキスト・取得

文章で質問を伝えるのって難しいですね。
私も良く質問や質問への返答などで不備があって注意を受けますので他人の事は言えませんが、お互い頑張りましょう!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • JavaScript

    17604questions

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

  • for

    257questions

    for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

  • if

    220questions

    if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。