JS テキストコピーボタン、離れた位置にあるテキストをコピーしたい（複数設置）

Question

実現したいこと

指定範囲のテキストをコピーするボタンを作っているのですが、正常に動作しません。
・コピーボタンとテキストのセットは同ページ内に複数設置予定
・コピーボタンはタイトルcontentsPanel__unit__title内に設置
・コピーしたい対象テキストはcontentsPanel__unit__item内is-copyText部分

$(this).parents('.contentsPanel__unit__title').next('.contentsPanel__unit__item').find('.is-copyText');の記述部分次第だと考えているのですが、あれこれ試してもダメでした。

該当のソースコード

<div class="contentsPanel__unit">
  <div class="contentsPanel__unit__title contentsPanel__unit__title--all modFlexBox">
    テキストエリア
    <div class="modBtn">
      <button type="button" class="modBtn__item modBtn__item--secondary modBtn__item--xs is-copyBtn">コピー</button>
    </div>
  </div>
  <div class="contentsPanel__unit__item">
    <textarea id="testCopy" class="modForm modForm--textarea is-copyText" placeholder="test test test" readonly></textarea>
  </div>
</div>

$(function(){
  window.addEventListener('load', function(){
    $('.is-copyBtn').on('click',function(){
      var textElem = $(this).parents('.contentsPanel__unit__title').next('.contentsPanel__unit__item').find('.is-copyText');
      window.getSelection().selectAllChildren(textElem[0]);
      document.execCommand("copy");
    });
  });
});

試したこと

以下にすると正常にコピーされるのですが、
都度都度IDを追加していくのは不便なためできれば上記の様な指示で動作を実現したいです。

<div class="contentsPanel__unit">
  <div class="contentsPanel__unit__title contentsPanel__unit__title--all modFlexBox">
    テキストエリア
    <div class="modBtn">
      <button type="button" onclick="copy()" class="modBtn__item modBtn__item--secondary modBtn__item--xs is-copyBtn">コピー</button>
    </div>
  </div>
  <div class="contentsPanel__unit__item">
    <textarea id="testCopy" class="modForm modForm--textarea is-copyText" placeholder="tbsUQRZjaHf9p4iHHet3" readonly></textarea>
  </div>
</div>

$(function(){
  function copy() {
    let text = document.getElementById('testCopy');
    text.select();
    document.execCommand('copy');
  }
});

###追記

<div class="contentsPanel">
  <div class="contentsPanel__unit modFlexBox">
    <div class="contentsPanel__unit__title">タイトル</div>
    <div class="contentsPanel__unit__item">XXX</div>
  </div>
  <div class="contentsPanel__unit">
    <div class="contentsPanel__unit__title contentsPanel__unit__title--all modFlexBox">
      テキストエリア
      <div class="modBtn">
        <button type="button" class="modBtn__item modBtn__item--secondary modBtn__item--xs is-copyBtn">コピー</button>
      </div>
    </div>
    <div class="contentsPanel__unit__item">
      <textarea id="testCopy" class="modForm modForm--textarea is-copyText" placeholder="test test test" readonly></textarea>
    </div>
  </div>
  <div class="contentsPanel__unit modFlexBox">
    <div class="contentsPanel__unit__title">タイトル</div>
    <div class="contentsPanel__unit__item">XXX</div>
  </div>
  <div class="contentsPanel__unit modFlexBox">
    <div class="contentsPanel__unit__title">タイトル</div>
    <div class="contentsPanel__unit__item">XXX</div>
  </div>
  <div class="contentsPanel__unit">
    <div class="contentsPanel__unit__title contentsPanel__unit__title--all modFlexBox">
      テキストエリア
      <div class="modBtn">
        <button type="button" class="modBtn__item modBtn__item--secondary modBtn__item--xs is-copyBtn">コピー</button>
      </div>
    </div>
    <div class="contentsPanel__unit__item">
      <textarea id="testCopy" class="modForm modForm--textarea is-copyText" placeholder="test test test" readonly></textarea>
    </div>
  </div>
  <div class="contentsPanel__unit">
    <div class="contentsPanel__unit__title contentsPanel__unit__title--all modFlexBox">
      テキストエリア
      <div class="modBtn">
        <button type="button" class="modBtn__item modBtn__item--secondary modBtn__item--xs is-copyBtn">コピー</button>
      </div>
    </div>
    <div class="contentsPanel__unit__item">
      <textarea id="testCopy" class="modForm modForm--textarea is-copyText" placeholder="test test test" readonly></textarea>
    </div>
  </div>
</div>

Comments

[azuapricot]

parents('.contentsPanel__unit').find('.is-copyText') ってやってもとれないですか？

[crigw]

そちらでは動きませんでした…；；

[tabuu]

試したことにある「onclick="copy()"」を「onclick="copy('testCopy')"」として、スクリプトにtextareaのIDを渡すのも面倒(不便)でしょうか？

[x_x]

text.select(); をやめたのはなぜでしょうか？

[yambejp]

コピーしたいテキストごとにボタンがあるという前提ですね？
それらをdivなどで囲んでグルーピングされているなら
相対位置でとれますよ

[Lhankor_Mhy]

x_xさんがご指摘の通り、当方でも、text.select();なら動作しますね。（余分なロードイベントを外した上で）

[crigw]

>tabuuさん
コピーしたいテキストの数が定まっていないため、IDでの制御だと不便になります…

>x_xさん
前者と後者で参考にしたサイトの記述が違うためです。

>yambejpさん
>コピーしたいテキストごとにボタンがあるという前提
こちらであっています。
なるほど、グルーピングすればいいのですね…
ちなみにすみません、相対位置の記述はどう言う風にすればいいでしょうか…

>Lhankor_Mhyさん
余分なロードイベントとはどこにあたる部分でしょうか。

[Lhankor_Mhy]

余分なロードイベントとはこれです。
window.addEventListener('load', function(){

[crigw]

>Lhankor_Mhyさん
ご教示、ありがとうございます。
ですが、動きませんでした…；；

[Lhankor_Mhy]

なるほど。
当方では動作しましたので、ご提示いただいていない部分に原因があるのだと思います。

[crigw]

確認・参考のため、動作した記述内容を教えて頂けますでしょうか

[Lhankor_Mhy]

こちらです。
https://jsfiddle.net/Lhankor_Mhy/89xtmek1/

[crigw]

うごきました！ありがとうございます。
私側で動かなかったのは何を勘違いしたのか`var textElem = $(this).parents('.contentsPanel__unit__title').next('.contentsPanel__unit__item').find('.is-copyText');`を丸々削除してしまったためでした…

[Lhankor_Mhy]

ご解決されて何よりです。

Answer 1

相対位置

「.is-copyBtn」から「.is-copyText」までの相対位置は
提示のソースでいうと「.contentsPanel__unit」までさかのぼって探すとよいでしょう

Comments

[yambejp]

提示のソースだと
.contentsPanel__unit__titleまでさかのぼり
次の.contentsPanel__unit__itemを取りに行っていますが
グルーピングするならのその上の段階でやるわけです

$('.is-copyBtn').on('click',function(){
$(this).closest('.contentsPanel__unit').find('.is-copyText')

[crigw]

共同製作者に確認したところ、divなど追加してグルーピングをする方法が取れないことが判明しました…
Vue(?)を用いて`.contentsPanel__unit`以下を繰り返し使うためと説明を受けました。
このHTMLソースのままに、位置を取得することは可能でしょうか？

[yambejp]

ソースがvueならjQueryはやめたほうがよいです

[crigw]

そうなんですね、担当者に相談してみます。
後学のため、HTMLソースそのままにコピーをする方法がありましたら一応教えて頂けますでしょうか。

[crigw]

あらためて、VUEは使わないとのことですが、HTMLは変更しないでやれるならやりたいと言うことでした。

[yambejp]

「.is-copyBtn」と「.is-copyText」の組み合わせが複数ある
htmlのサンプルを提示できますか？

[crigw]

サンプルを追記しました。

[yambejp]

$(function(){
$('.is-copyBtn').on('click',function(){
var t=$(this).closest('.contentsPanel__unit__title').next('.contentsPanel__unit__item').find('textarea');
t.focus();
document.execCommand('copy');
});
});

[crigw]

ありがとうございました！