idに数字を連続的に追加したい

Question

JavaScriptでpre要素にidを追加するのはこのコードだと思うのですが。

$('pre').attr("id", "id名");

さらにそのidが複数にある場合。

$('要素').attr("id", "id名"+ (i+1));

このように入力すると連続数字を追加できますよね。

<pre id="id名1"></pre>
<pre id="id名2"></pre>

それが

<pre id="id名6"></pre>
<pre id="id名6"></pre>

となってしまうのですがどういうことなのでしょうか。

###（追記）
https://teratail.com/questions/56205
こちら延長でのことなのですが無事、以下のコードでできました。

let i = 1
let id = "hljs"
$('pre').attr("id", _ => id + i++);

ですが、コピーさせるためには
data-clipboard-target の項目と、コピーするJavaScriptで定義しているクラスを変えなければいけないのですがどうすれば良いのでしょうか。

このvar cp = new Clipboard($('.hljs')[0]);部分の.hljsを数字にしなければいけないと思うのですがどうすればいいのでしょうか。

$(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
  var cp = new Clipboard($('.hljs')[0]);
  // 成功時アラート
  cp.on('success', function(e) {
    alert('コードのコピーに成功しました!!');
  });
  // 失敗時アラート
  cp.on('error', function(e) {
    alert('コードのコピーに失敗しました...');
  });
});

▼**data-clipboard-target** の項目の置き換えでできなかったコード▼

let i = 1
let data-clipboard-target = "#hljs"
$('pre').attr("data-clipboard-target", _ => id + i++);

Answer 1

それだと連番にはなりません
i+1 が 6 なら全部の pre が 6 になります

let i = 1
$('pre').attr("id", _ => i++);

これで 1 からの連番になります

追記

id名を入れるとこうですね

let i = 1
let id = "id名"
$('pre').attr("id", _ => id + i++);

Comments

[2001Y]

$('pre').attr("id", ここにidでいいのですか？ => i++);

後、JavaScriptじゃなくてcssとかで完結にはできないですよね。
おそらくこちらを使うのでが知識として興味があるのですが。

[2001Y]

なるほど、やってみます。

[lazex]

id 入りを追加しました。
cssでhtmlのidに（好きなid名＋連番）を設定はできないですがそのidを使ってやりたいことによってはpreにidをいれなくともできる場合があると思います。

[2001Y]

ありがとうございます。
追記でまた質問がありますのでまた教えてくださると助かります。

[lazex]

前質問みました
やりたいことは .hljs でハイライトした pre タグをクリックしたときに pre タグの中身をコピーしたいということであってますか？

それなら id つけなくともこれでできました

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<pre class="hljs">
let a = 1
</pre>

<script type="text/javascript">
$(function(){
    var clipboard = new Clipboard('.hljs', {target: e => e});
    clipboard.on('success', function(e) {
     //成功時の処理
    });
    clipboard.on('error', function(e) {
     //失敗時の処理
    });
})
</script>
```

[lazex]

それと置き換えで出来なかったコードに
`let data-clipboard-target = "#hljs"`
がありますが変数名に `-` は使えないのでまず構文チェックのところでエラーになってたのではないでしょうか

[2001Y]

highlight.jsでhighlightしたものは確かにクラスでコピーできるようなのですが、そうすると複数のpreでコードを表示した時に、挙動がわからないのですが。
それと、構文チェックの時のエラーのことですが、全然わからなので（涙）もしよかったら新たなコメントでいいので教えてくださると嬉しいです。

[2001Y]

それとどうしてtargetを使っているのでしょうか、僕の記憶ではページ内リンクでの疑似要素の一つあったと記憶しているのですが、どういうことなのでしょうか。

[lazex]

> 複数のpreでコードを表示した時に、挙動がわからないのですが。
クリックした pre の中身がコピーされます

> 構文チェック
どこまでの知識があるのかわからないのですこし詳しめにかきます

HTML ファイルをブラウザ(Chromeなど)で開いて確認していると思うのですが、 Chrome や Firefox で F12 キーを押せば開発者ツールが表示され、コンソールで開いているページのエラーなどが確認できます

上の方にタブがあるので　`Console` というところを押せばコンソールが表示されます
この場合は `Uncaught SyntaxError: Unexpected token -` という感じのメッセージが出ていると思います

`let XXXX = "aaaa"` は XXXX という名前の変数を宣言して "aaaa" というデータをそこにいれるという処理です
XXXX のところは日本語もふくめて基本的に好きな名前をつけれるのですが 半角記号など使えないものもあります
今回つかっている `-` は使えない文字なので JavaScript の構文として間違っていることになりエラーが起きます

> target
なぜ target といわれると Clipboard.js の仕様ですとしかいえないです
使い方は公式サイトにあるとおりです
https://clipboardjs.com/

target: e => e で、コピーする対象を選択しています
e => e は引数をそのまま返す関数ですのでクリックしたモノ自身がコピーされます

[2001Y]

できましたありがとうございました！
ベストアンサーに選ばせていただきます。

[2001Y]

二つ目のクラス（.nohighlight）にも機能させたいのですが、.hljsの横に書くだけではダメなのでしょうか。

Answer 2

フォー文で回して加算で良いんじゃ…。

使えませんでしたっけ？

Comments

[2001Y]

申し訳ないです。
JavaScript全くわからなくて、KatsukiSugiura様のおしゃっていることも理解できないのですが、for文とは繰り返しの処理のようで、全く自分は使えません。
もしよかったら新しいコメントでもいいので、コードを教えていただけると助かります。
それと、教えてくださりありがとうございます。

[KatsukiSugiura]

フォー文は繰り返し処理です。

構文は

for(変数; 条件; 加算){
条件式
}

と定義されていて、一定回数繰り返して同じ処理をする際に利用する文法です。

jqueryはjavascriptのライブラリで、フォー文が使えたと思いますので、クラスがわかる方なら関数や繰り返し処理は当然わかるはずだろうと思ったのですが…。

jqueryでDOM操作関連で仕事をされているなら下手に基本的な事覚えるよりアニメーションやエイジャックスなど覚えた方が実利があると思いますので、jquery for while loopなどでご自分で調べてみて下さい。

[KatsukiSugiura]

追記:変数 代入 関数 引数 演算子 配列などが基本です。

[2001Y]

詳しくありがとうございます。

全くわかってないです汗
仕事というか、まだ中三なので仕事ではなく趣味でやっているだけです。

[KatsukiSugiura]

それなら、プロゲートで遊ぶとイイですよ。

[2001Y]

はい、ありがとうございます。

Answer 3

(i+1) ですと変数iの値は変わりません。
(i++)とすると変数iの値が+1されるので1ずつ増えるはずです。

Comments

[2001Y]

ありがとうございます参考にさせていただきます。

[2001Y]

追記でまた質問がありますのでまた教えてくださると助かります。