We Keep Coding

How to target a specific element from a group of them having the same class/id in javascript?

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>

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>

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);
});

How can i add a css class only to the h3 tag clicked using jQuery

<li>
<div id="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option 1</h3></div>
</li>
I need to show which one h3 tag is clicked to show active

You need to do it like below:-
$(document).ready(function(){
$('.lineop1 a h3').click(function(e){
e.preventDefault(); // to prevent page refresh with new url
$('h3').removeClass('active'); // remove active class from other h3 tag
$(this).addClass('active'); // add active class to current clicked tag
});
});
.active{
color:green;
font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<div class="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option 1</h3></div>
</li>
Note:- id need to be unique per element. so convert id to class around <div's>
And if you want that after click on h3 when page refresh, then also the corresponding h3 tag have the active class, then you have to use localstorage concept like below:-
jQuery:-
$(document).ready(function(){
$('ul li').eq( localStorage.parent ).find('h3').addClass('active');
$('.lineop1 a h3').click(function(e){
var pagename = $(location).attr("href").split('/').pop();
localStorage.parent=$(this).closest('li').index();
});
});
Html:-
<ul>
<li>
<div class="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option 1</h3></div>
</li>
</ul>
I have tested it on localhost at my end and working perfectly fine.

add a click handler to h3. Add class active to it.
$(document).ready(function(){
$(document).on('click','h3',function(){
$('h3').removeClass('active');
$(this).addClass('active');
});
});
.active{
color:#ff00eb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<div id="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option 1</h3></div>
</li>
Edit: its always good practice to attach click event to the closest unique parent element. so I have included $(document).On.
Follow this link to see working of Direct Vs Deletegated Events

Element does not appear if order changed

I displayed 3 li elements with HTML and 3 using JavaScript code. If I change my JavaScript div tag to last it displays both the ul elements, else it's not displaying the HTML ul tags. Can you tell me why?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>my javascript eg </title>
<script type="text/javascript" >
function process()
{
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> ";
var divid=document.getElementById("mydiv");
divid.innerHTML=sval;
}
</script>
</head>
<body onload="process()">
Hi Dude !!!
<div id="mydiv"/>
<ul id="u2" onclick="fn1()">
<li>orange</li>
<li>blue</li>
<li>yellow</li>
</ul>
<!-- If I place the same div element at last line it doesn't work. -->
</body>
</html>

use class instead of id, class is used for multiple elements
JS
function process()
{
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> ";
var divclass=document.getElementsByClassName("mydiv");
for (var i = 0;i<divclass.length;i++){
var item = divclass[i];
item.innerHTML=sval;
}
}
HTML
<body onload="process()">
Hi Dude !!!
<div class="mydiv"></div>
<ul id="u2" onclick="fn1()">
<li>orange</li>
<li>blue</li>
<li>yellow</li>
</ul>
<div class="mydiv"></div>
</body>
Demo: http://jsfiddle.net/5avtsqnz/6/

It is because you cannot have more than one element in the DOM with the same id. If you do so you will always get only the first element with the id.
See the code, its getElementById and not getElementsById. So it it always return a single element.

Try this<------------HTML Code--------->SEE THIS YOUR CODE: http://jsfiddle.net/fbwyyrcL/
<body onload="process()">
Hi Dude !!!
<div id="mydiv"></div>
<ul id="u2" onclick="fn1()">
<li>orange</li>
<li>blue</li>
<li>yellow</li>
</ul>
</body>
<------------Script code is------->
function process()
{
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> ";
var divid=document.getElementById("mydiv");
divid.innerHTML=sval;
}

You just have just to close your div tag properly, or to create another div around your primary ul definition. If you leave the inital ul inside the "mydiv" div, it is overwritten (deleted) after your function run.
Following code has worked for me in IE9:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>my javascript eg</title>
<script type="text/javascript" >
function prozess(){
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul>";
var divid=document.getElementById("mydiv");
divid.innerHTML=sval;
};
</script>
</head>
<body onload = "prozess()">
Hi Dude !!!
<div id="mydiv"> </div>
<ul id="u2" onclick="fn1()">
<li>orange</li><li>blue</li><li>yellow</li>
</ul>
</body>
</html>

Load div when clicked on list item

I have a question. I’m making a one page design website at the moment, and in one div there’s a loader where you can see what my skills are. It's an animated circle. The problem is that the loader already loads when you're on the website. But I want it to load when you click on the list item 'Skills'. So that's the third list item called #blok3.
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
Below is the script of the skills loader. Als you can see in the Javascript part there are 5 id's but below I putted one because the other 5 are all te same, except the name #myStat...
<div class="statistic">
<div id="myStat1" data-dimension="150" data-text="Ai" data-info="" data-width="15" data-fontsize="38" data-percent="85" data-fgcolor="#FFF" data-bgcolor="#A7E3E7"></div>
<div class="statistic-text">Illustrator</div>
</div>
<script>
$( document ).ready(function() {
$('#myStat1').circliful();
$('#myStat2').circliful();
$('#myStat3').circliful();
$('#myStat4').circliful();
$('#myStat5').circliful();
$('#myStat6').circliful();
});
</script>
I tried some things with the knowledge that I have, but it didn't work. I hope someone can help me. Thank you :)
When I don't use any code the loader looks like this:
http://nl.tinypic.com/view.php?pic=rh1ydc&s=8#.U2T5OK00SjU
When I use the code from Krish R the loader looks like this (look at the picture below). There appear more circles, but it starts loading when you click on Skills, so that's the good part. But I don't need the double circles of course ;)
http://nl.tinypic.com/view.php?pic=1690txz&s=8#.U2T5Va00SjU

You should put the code to animate the circle in a function that is called on (executed), when the list item is clicked... As $( document ).ready(function() means that your code should execute at the instant the page loads! :D
Example:
Code:
<!doctype html>
<html lang="en">
<head>
<title>Circle</title>
<script>
function skill()
{
// the code to animate circle
alert('animated circle!');
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>
<a onclick = "skill()" href="#blok3">
Skills
</a>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</body>
</html>
Tested in: Firefox 24, Google Chrome 34
Update:
Since we don't have access to the circle animation code, we could completely remove it, and when Skills is clicked, we dynamically put it in using JavaScript's innerHTML .
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<title>Circle</title>
<script>
function skill()
{
var anim = document.getElementById('anim');
anim.innerHTML = '<div id="myStat1" data-dimension="150" data-text="Ai" data-info="" `data-width="15" data-fontsize="38" data-percent="85" data-fgcolor="#FFF" data-bgcolor="#A7E3E7"></div><div class="statistic-text">Illustrator</div> ';`
$('#myStat1').circliful();
$('#myStat2').circliful();
$('#myStat3').circliful();
$('#myStat4').circliful();
$('#myStat5').circliful();
$('#myStat6').circliful();
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li onclick = "skill()">
<a onclick = "skill()" href="#blok3">
Skills
</a>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="statistic" id = "anim">
</div>
</body>
</html>

Can you try this,
Javascript:
$( document ).ready(function() {
Loadcircliful();
$("#myskills").click(function(){
Loadcircliful();
return false;
});
});
function Loadcircliful(){
$('#myStat1, #myStat2, #myStat3, #myStat4, #myStat5, #myStat6').circliful();
}
in html,
<li>Skills</li>

may be this works for you...
in your html
<li id="blok3">Skills</li>
in your javascript
$('#blok3').click(function () { $('#myStat3').circliful(); });

jquery next siblings

I've been trying to get this problem solved, but I can't seem to figure it out without some serious workarounds.
if I have the following HTML:
<ul>
<li class="parent"> headertext </li>
<li> text </li>
<li> text </li>
<li> text </li>
<li class="parent"> headertext </li>
<li> text </li>
<li> text </li>
</ul>
Now, how do I now just select the <li> tags following the first parent (or second, for that matter)? Basically selecting an <li> with class="parent" and the following siblings until it reaches another <li> with the parent class.
I could restructure the list with nested lists, but I don't want to do that. Any suggestions?

actually, you can easily do this using nextUntil().
no need to write your own "nextUntil" since it already exists.
ex. -
$(".a").nextUntil(".b");
or as suggested by Vincent -
$(".parent:first").nextUntil(".parent");

The root of your problem is that the <li>s you have classed as parent really are NOT parents of the <li>s "below" them. They are siblings. jQuery has many, many functions that work with actual parents. I'd suggest fixing your markup, really. It'd be quicker, cleaner, easier to maintain, and more semantically correct than using jQuery to cobble something together.

I don't think there is a way to do this without using each since any of the other selectors will also select the second parent and it's next siblings.
function getSibs( elem ) {
var sibs = [];
$(elem).nextAll().each( function() {
if (!$(this).hasClass('parent')) {
sibs.push(this);
}
else {
return false;
}
});
return $(sibs);
}

You will have to run the loop yourself since jQuery does not know how to stop on a specific condition.
jQuery.fn.nextUntil = function(selector)
{
var query = jQuery([]);
while( true )
{
var next = this.next();
if( next.length == 0 || next.is(selector) )
{
return query;
}
query.add(next);
}
return query;
}
// To retrieve all LIs avec a parent
$(".parent:first").nextUntil(".parent");
But you may be better using a really structured list for your parent/children relationship
<ul>
<li class="parent"> <span>headertext</span>
<ul>
<li> text </li>
<li> text </li>
<li> text </li>
</ul>
</li>
<li class="parent"> <span>headertext</span>
<ul>
<li> text </li>
<li> text </li>
</ul>
</li>
</ul>

$("li.parent ~ li");

I know this is a very old thread, but Jquery 1.4 has a method called nextUntil, which could be useful for this purpose:
http://api.jquery.com/nextUntil/

<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var fred = $("li").not('.parent').text();
$('#result').text(fred);
});
});
</script>
</head>
<body>
Click me
<ul>
<li class="parent"> headertextA </li>
<li> text1 </li>
<li> text2 </li>
<li> text3 </li>
<li class="parent"> headertextB </li>
<li> text4 </li>
<li> text5 </li>
</ul>
<div id="result"></div>
</body>
</html>