问题

I use GitHub gist to load my sample code to my personal blog. I design a webpage and gist is loaded. each gist create a div element:

<div id="gist*********" class="gist"></div>

also see this image:
github gist div id

I using clipboard.js to copy my gist to the clipboard with the target. the target is an id that begins with gist word. now I want to reach this id but I cannot find any way. any idea?

notice: I am blogger and I need to create many gists in a blog post so I must use a target with clipboard.js

sample codes:

button code:

<button class="btn btn-sm btn-outline-primary copy-to-clipboard font-weight-bold" data-clipboard-target="#gist100405804">copy<i class="fas fa-copy ml-2"></i></button>

init clipboard js:

new ClipboardJS('.copy-to-clipboard');

<div id="gist*********" class="gist"></div>

<button class="btn btn-sm btn-outline-primary copy-to-clipboard font-weight-bold" data-clipboard-target="#gist100405804">copy<i class="fas fa-copy ml-2"></i></button>

new ClipboardJS('.copy-to-clipboard');

答案1

得分: 1

[id^="gist"] 这将选择所有以 gist 值开头的元素。

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
console.log($('[id^="gist"]').text())
<!-- language: lang-css -->
[id^="gist"]{
  color:red;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gist01654">a</div>
<span id="gist_4">b</span>
<div id="654gist">c</div>
<div id="gis01654">d</div>
<!-- end snippet -->

console.log($('[id^="gist"]').text())

[id^="gist"]{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gist01654">a</div>
<span id="gist_4">b</span>
<div id="654gist">c</div>
<div id="gis01654">d</div>