jQueryで異なる複数のIDを、新しいIDの変更する場合のメモ

カテゴリー︎： 【JavaScript】・【jQuery】

IDを変更できない時に有効

異なる複数のIDを、新しいIDの変更する場合のメモ

.each()メソッドをつかうやりかた

.each()メソッドとは

第1引数には各要素のインデックス番号が参照され

第2引数には繰り返し処理中の要素が参照される

2つの引数はどちらも省略可能

.each()メソッドを使うことで

要素数分を繰り返し指定した関数を実行することができる

よくソースで見られる
第1引数は(　i は indexの略 )
第2引数はElement型( e は elementの略 )
DOM Element として使いたい場合はそのまま、
jQueryオブジェクトとして使いたい場合は$( )をつける

$('h2').each(function(i,e) {
    console.log(i + ': ' + $(e).text());
});

第2引数を指定してない場合に処理中の要素を取得する場合はthisを使う

$('h2').each(function(i) {
    console.log(i + ': ' + $(this).text());
});

配列とオブジェクトを指定する場合⇒こちら

全体のソース

すでにh2で指定したIDを変更したいが、ページの量が多すぎて

変更するのが面倒な時にjQueryで指定したIDを変更する

<body>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
  $(function() {


$('h2').each(function(i, e){
  // $('h2').attr('class', 'newClass');//新しいクラス名をつける場合

//異なるIDを変更して、新しいIDを付与する
  $('[id=article__title_1]').attr("id", "article__title_AAA");
  $('[id=article__title_2]').attr("id", "article__title_BBB");
  $('[id=article__title_3]').attr("id", "article__title_CCC");

  console.log(index + ':' + $(e).text());
});

/*

0:企業情報
1:サービス紹介
2:アクセス

*/

  });
  </script>
  目次に戻るためのIDを生成するjavascript
  <div id="wrap">
    <h1>目次に戻るためのIDを生成するjavascript</h1>

    <h2 id="article__title_1">企業情報</h2>
    <div class="box-01">
      <div class="article">
        <p>時期尚早な最適化はすべての悪の根源である byドナルド・クヌース</p>
        <p class="gotoTop"><a href="#">topに戻る</a></p>
      </div>
    </div>

    <h2 id="article__title_2">サービス紹介</h2>
    <div class="box-02">
      <div class="article">
        <p>時期尚早な最適化はすべての悪の根源である byドナルド・クヌース</p>
        <p class="gotoTop"><a href="#">topに戻る</a></p>
      </div>
    </div>

    <h2 id="article__title_3">アクセス</h2>
    <div class="box-03">
      <div class="article">
        <p>時期尚早な最適化はすべての悪の根源である byドナルド・クヌース</p>
        <p class="gotoTop"><a href="#">topに戻る</a></p>
      </div>
    </div>

  </div>
</body>

このコード実行によって
id=article__title_1　⇒　　article__title_AAA　に変更
id=article__title_2　⇒　　article__title_BBB　に変更
id=article__title_3　⇒　　article__title_CCC　に変更

できた

しかし　このようなパターンが１００回必要な場合は１００行追加しなければないない。。。

が

そのときがきたら考える

今はこれでよしとする

時期尚早な最適化はすべての悪の根源である byドナルド・クヌース

PAGE TOP