如何从一组具有相同类/id 的 javascript 中定位特定元素？

Question

I want to copy the text in the <li> tag using JavaScript. It should be copied when the <li> tag is clicked. All <li> tags have the same class as they will get the same formatting through CSS.

As per my research, we need to specify the button a target class which it will copy to clipboard(Using clipboard.js ). The <li> tag will be generated through js so, to give different id to each one of them will be difficult and will increase the code and reduce the speed too.

So how can copy the text of the li tag that is being clicked through js/jquery/clipboard.js etc.

---

<ul>
    <li class="data">Lorem ipdolor.</li>
    <li class="data">Lo ripsum dolor.</li>
    <li class="data">Lorepsum dor.</li>
</ul>

Answer 1

There are different methods but two that stand up on top.

 $(function() { $("li[class='data']").click(function(e) { // 1) Use this reference console.log("1: " + $(this).text()); // 2) Use Event Target console.log("2: " + $(e.target).text()); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="data">Lorem ipdolor.</li> <li class="data">Lo ripsum dolor.</li> <li class="data">Lorepsum dor.</li> </ul>

Answer 2

You can put an id on ul:

<ul id="dataContainer">
        <li class="data">sometext</li>
        <li class="data">sometext1</li>
        <li class="data">sometext2</li>
        <li class="data">sometext3</li>
</ul>

Then:

document.getElementById('dataContainer').addEventListener('click', function(e){
  console.log(e.target.innerText);
});