My markup is a div with 3 spans inside. How can I read the value of each span with jquery.
<div id="mod">
<span>first span<span>
<span>second span<span>
<span>third span<span>
</div>
function getVars(){
var span1 = ;
var span2 = ;
var span3 = ;
}
please try this
$('#mod').find('span').text();
$(document).ready(function(){
alert($("#mod span:first").text());//First span child only
alert($("#mod > span").text());// All span children
});
Note: Make sure to close your span "".
You can also use this
$(document).ready(function () {
alert($("#mod span:eq(0)").html());
});
Close the span tags <span> first </span> then it should work, all the answers
another variation
$(document).ready(function () {
alert($("#mod").children(":first").text());
});
<!DOCTYPE html>
<html>
<head>
<style>
span { color:#008; }
span.sogreen { color:green; font-weight: bolder; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>
<div>
<span>Glen,</span>
<span>Tane,</span>
<span>Ralph</span>
</div>
<script>
$("div span:first-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("sogreen");
}, function () {
$(this).removeClass("sogreen");
});
</script>
</body>
</html>
Related
For example, i have <div id="titlebar"></div> inside html, and also i have <div class="name">Content-text</div> inside same html. Now i want pass Content-text of div class name (<div class="name">Content-text</div>) to another my id <div id="titlebar"></div> through css or js. i tried several ways, but no effect
And when i scroll up the html the id titlebar will show the text of class name
My html:
<html>
<body>
<div id="titlebar"></div>
<div class="name">Content-text</div>
</body>
</html>
Css:
#titlebar{
text-align:center;
width: 101%;
position: fixed;
top:0px;
margin-left:-10px;
padding-right:1px;
font-family: Times New Roman;
font-size: 16pt;
font-weight: normal;
color: white;
display:none;
border: none;
}
Javascript:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById("titlebar").style.display = "block";
} else {
document.getElementById("titlebar").style.display = "none";
}
}
Working Sample, jsFiddle
Please find it here.
<style>
#titlebar{
border: 1px solid black;
}
.name{
border: 1px solid red;
}
</style>
<div>
<div id="titlebar"></div>
<br/>
<div class="name">Content-text</div>
<button id='btn'>
Click to cpoy and put text inside titlebar
</button>
</div>
<script>
document.getElementById('btn').addEventListener('click', function() {
// Find your required code hre
let textInsideDivelementWithclass = document.getElementsByClassName('name')[0].innerText,
titlebarEle = document.getElementById('titlebar');
titlebarEle.innerText = textInsideDivelementWithclass;
});
</script>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var Content_text = $(".name").text();
$("#titlebar").text(Content_text);
});
});
</script>
</head>
<body>
<button>Copy</button>
<div class="name">Content-text</div>
<div id="titlebar">copy here</div>
</body>
</html>
First you get the text of your .name element:
let nameElement = document.querySelector(".name").textContent;
then you get the target element and assign the .name text to it :
document.querySelector("#titlebar").textContent = nameElement;
First of all you should determin an id for your div like this:
<div id="name">Content-text</div>
then use this code:
<script type="text/javascript">
var DivName = document.getElementById('name');
var DivTitlebar = document.getElementById('titlebar');
DivTitlebar.innerHTML = DivName.innerHTML;
</script>
Please try this..
You have to get the content from the div1 and div2 to two seperate variables div1Data and div2Data
Then from the HTML DOM innerHTML Property you can assign the content to your preferred div
function copyContent() {
var div1Data= document.getElementById('div1');
var div2Data= document.getElementById('div2');
div2Data.innerHTML = div1Data.innerHTML;
}
<div id="div1">
Content in div 1
</div>
<div id="div2">
</div>
<button onClick="copyContent()">Click to copy</button>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script>
$(document).ready(function(){
var Content_text = $(".name").text();
//alert(Content_text);
$(function() {
$(window).mousewheel(function(turn, scroll) {
if (scroll > 0) $('#titlebar').text('Content_text');
else $('#titlebar').text('Copy here');
return false;
});
});
//$("#titlebar").text(Content_text);
});
</script>
</head>
<body>
<div class="name" style="margin-top:50px;">Content-text</div>
<div id="titlebar" style="margin-top:50px;">Copy here</div>
</body>
</html>
I am trying to create a comment box where on each submit a new is dynamically created. The inner elements of the <div> being 3 buttons Edit, Post, Cancel and a close icon(image). These are also dynamically created. I finally append them all together. The below code would generate something like the below image on two submits. The error I'm facing is that, whatever <div>'s close icon/button is clicked, always the last <div> is being affected. Here I tried to close 'Hi' but 'hello' is being affected.Also there is a duplication of the <div> on even comments.
Kindly help me correct these issues.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<textarea id="ta" rows="30" cols="30" readonly></textarea>
<br>
<input type="textbox" id="tb"></input><br>
<button onclick="add()">Submit</button><br>
<script type="text/javascript">
var newDiv="",i=1,ta="";
function add() {
i++;
ta=document.getElementById('ta');
newDiv = document.createElement("div");
newDiv.id = "d"+i;
newDiv.style.display="block";
newTa = document.createElement("input");
newTa.type="text"
newTa.id = "t"+i;
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
newTa.style.display="block";
newTa.onclick=function(){
newP.style.visibility="visible";
newImg.style.visibility="visible";
newBut1.style.visibility="visible";
newButt1.style.visibility="visible";
};
// document.querySelector('body').addEventListener('click', function(event) {
newP=document.createElement("BUTTON");
newP.id="p"+i;
newP.innerHTML="Edit";
newP.style.visibility="hidden";
newP.style.display="inline";
newP.onclick=function()
{
newTa.removeAttribute('readonly'); // only needed the first time
newTa.readOnly = false;
//newTa.setAttribute("readOnly","false");
//newTa.readonly='false';
//newP.innerHTML="wrng";
}
newImg=document.createElement("IMG");
newImg.id="i"+i;
newImg.src="http://www.freeiconspng.com/uploads/close-icon-30.png";
newImg.style.width="20%";
newImg.style.height="20%";
newImg.alt="close";
newImg.style.visibility="hidden";
newImg.style.display="inline";
newImg.onclick=function()
{
newDiv.innerHTML="";
//newDiv.remove();
}
newBut1=document.createElement("button");
newBut1.id="b"+i;
newBut1.innerHTML="Post";
newBut1.style.visibility="hidden";
newBut1.style.display="inline";
newBut1.onclick=function(){
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
}
newButt1=document.createElement("button");
newButt1.id="bt"+i;
newButt1.innerHTML="Cancel";
newButt1.style.visibility="hidden";
newButt1.onclick=function(){
newTa.value=document.getElementById('tb').value;
newTa.readonly='true';
}
newDiv.appendChild(newTa);
newDiv.appendChild(newP);
newDiv.appendChild(newImg);
newDiv.appendChild(newBut1);
newDiv.appendChild(newButt1);
var b=""
b="t"+i;
ta.appendChild(newDiv);
document.getElementById(b).value=document.getElementById('tb').value;
}
</script>
</body>
</html>
Try this code. I have changed textarea to div.
Initial i to 0 instead of 1. You can also set it to 1. It won't affect the functionality.
Some variables were global, I have changed them to local variable now like newDiv,newP, newImg etc.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<!--<textarea id="ta" rows="30" cols="30" readonly></textarea>-->
<div id="ta"></div>
<br>
<input type="textbox" id="tb"></input><br>
<button onclick="add()">Submit</button><br>
<script type="text/javascript">
var i=0,ta="";
function add() {
(function(){
i++;
var temp_i = i;
ta=document.getElementById('ta');
var newDiv = document.createElement("div");
newDiv.id = "d"+temp_i;
newDiv.style.display="block";
newTa = document.createElement("input");
newTa.type="text"
newTa.id = "t"+temp_i;
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
newTa.style.display="block";
newTa.onclick=function(){
console.log(temp_i);
console.log(i);
newP.style.visibility="visible";
newImg.style.visibility="visible";
newBut1.style.visibility="visible";
newButt1.style.visibility="visible";
};
// document.querySelector('body').addEventListener('click', function(event) {
var newP=document.createElement("BUTTON");
newP.id="p"+temp_i;
newP.innerHTML="Edit";
newP.style.visibility="hidden";
newP.style.display="inline";
newP.onclick=function()
{
newTa.removeAttribute('readonly'); // only needed the first time
newTa.readOnly = false;
//newTa.setAttribute("readOnly","false");
//newTa.readonly='false';
//newP.innerHTML="wrng";
}
var newImg=document.createElement("IMG");
newImg.id="i"+temp_i;
newImg.src="http://www.freeiconspng.com/uploads/close-icon-30.png";
newImg.style.width="20%";
newImg.style.height="20%";
newImg.alt="close";
newImg.style.visibility="hidden";
newImg.style.display="inline";
newImg.onclick=function()
{
newDiv.innerHTML="";
//newDiv.remove();
}
var newBut1=document.createElement("button");
newBut1.id="b"+temp_i;
newBut1.innerHTML="Post";
newBut1.style.visibility="hidden";
newBut1.style.display="inline";
newBut1.onclick=function(){
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
}
var newButt1=document.createElement("button");
newButt1.id="bt"+temp_i;
newButt1.innerHTML="Cancel";
newButt1.style.visibility="hidden";
newButt1.onclick=function(){
newTa.value=document.getElementById('tb').value;
newTa.readonly='true';
}
newDiv.appendChild(newTa);
newDiv.appendChild(newP);
newDiv.appendChild(newImg);
newDiv.appendChild(newBut1);
newDiv.appendChild(newButt1);
var b=""
b="t"+temp_i;
ta.appendChild(newDiv);
document.getElementById(b).value=document.getElementById('tb').value;
})();
}
</script>
</body>
</html>
Why not you use jquery to minimize your code campaign. Below is the code which will fix your problem.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<br>
<div class="container">
<input type="textbox" id="tb"><br>
<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br />
</div>
<button class="submit">Submit</button><br>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.submit').click(function() {
var element = '<div class="container">'+'<input type="textbox" id="tb"><br>'+
'<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br /></div>';
$('.submit').before(element);
});
$('body').delegate('.cancel', 'click', function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>
Thanks
I've created a simple web page to learn about JQuery, But whenever I click on Button: another one its making the event of click on li disappear, glitched, it does nothing when the li is clicked.. . Here is the code:
JS:
$(document).ready(function(){
console.log("Ready");
var toggle = 0;
$("li").on("click",function(){
console.log("Clicked on li");
try{
$(this).hide(800);
$(this).removeClass("con");
$(this).addClass("con");
}
catch(err){
console.log("Exception "+err.message);
}
});
$("input").on("focus",function(){
console.log("Focused on input");
$("li").hide(800);
$("#D").html("Open div");
toggle = 1;
});
$("input").on("focusout",function(){
console.log("FocusedOut on input");
$("li").html($("input").val());
$("li").show(500,function(){
$("#D").html("Close div");
toggle = 0;
});
});
$("button").on("click",function(){
console.log("Clicked button :"+$(this).html());
if($(this).attr("id")=="s"){
$("li").show(300);
}
else if($(this).attr("id")=="n"){
$("li").removeClass("con");
}
else if($(this).attr("id")=="C"){
$("li").addClass("con");
}
else if($(this).attr("id")=="an"){
console.log("Added to html : "+$(".uDefined").html()+"<br/><li>"+$("li").last().html().substring(0,7)+($("li").last().html().substring(7,8)-(1)+1+1)+"</li>");
$(".uDefined").html($(".uDefined").html()+"<br/><li>"+$("li").last().html().substring(0,7)+($("li").last().html().substring(7,8)-(1)+1+1)+"</li>");
}
else{
$(".list").slideToggle(1000,function(){
if(toggle==0){
$("#D").html("Open div");
toggle=1;
}
else{
$("#D").html("Close div");
toggle = 0;
}
});
}
});
});
HTML:
<html>
<style type="text/css">
.list{
font-size: 100;
background-color: white;
}
li{
margin-left: 100;
border-radius: 20;
border-width: 3;
background-color: Black;
color:White;
}
.con{
color:red;
}
.uDefined{
}
</style>
<body onload="" style="background-color:gray;margin:40" >
<title>JQuery TryOut</title>
<h3 style="margin-left:800;">Welcome</h3>
<button id="D">Close Div</button>
<button id="s">Show All</button>
<button id="n">Remove Classes</button>
<button id="C">Add Classes</button>
<div class="list">
<ul class="uDefined">
<li class="con">content1</li>
<li>content2</li>
<li>content3</li>
<li>content4</li>
<li>content5</li>
<li>content6</li>
</ul>
</div>
<div>
<p>Please focus on this text box:</p><input id="ttt" placeholder="Enter text here" value="" type="text" />
</div>
<button id="an" >another one</button>
</body>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
THANKS FOR HELPERS!
Direct events are only attached to elements (that exist) at the time the .on() method is called. So when you are adding buttons dynamically, you need to use delegated event handlers.
You should change your code like this:
$("ul").on("click", "li", function () {
...
});
More about delegated events:
http://learn.jquery.com/events/event-delegation/
I have a div which contains a h2 tag and a p tag.
i wan a case where if the div is hovered (moverenter), the background colors of the h2 tag and the p tag get exchanged and when move leave it resets.
I am looking at this solution because i have many of the panels with different h2 tag and p tags. my approve so far:
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
on the jQuery i tried
$(document).ready(function(){
$(".panel").mouseenter(function(){
exchange($(this));
}).mouseleave(function(){
exchange($(this));
});
function exchange(e){
var x = e.children(".title"),
y = e.children(".desc");
x.css("background", "y.css('background')");
}
});
I am sorry, just learning JS
NB: since i have not gotten it working, i was also looking for a smooth transition effect on the exchange
Do you mean something like
$(".panel").mouseenter(function () {
var $this = $(this),
$h2 = $this.children('h2'),
$p = $this.children('p'),
h2c = $h2.css('background-color'),
pc = $p.css('background-color');
$h2.css('background-color', pc);
$p.css('background-color', h2c);
}).mouseleave(function () {
$(this).children('h2, p').css('background-color', '');
})
.panel h2 {
background-color: lightgrey;
}
.panel p {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
I didn't check everything but that won't work :
x.css("background", "y.css('background')");
Try something like :
var bgY = y.css('background');
x.css("background", bgY);
I made minor changes to your code
Hope it solves your problem.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="Content/jquery-ui-1.10.4.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$(".panel").mouseenter(function () {
$(".panel").toggle();
}).mouseleave(function () {
$(".panel").toggle();
});
})
</script>
</head>
<body>
<div class="panel" style="display:none" >
<h2 class="title" style="background-color:gray">This is the title</h2>
<p class="desc" style="background-color:lightgray">This is a decription</p>
</div>
<div class="panel" style="display:block" >
<h2 class="title" style="background-color:lightgray">This is the title</h2>
<p class="desc" style="background-color:gray">This is a decription</p>
</div>
</body>
</html>
For only exchanging CSS of p and h2 elements :-
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').css('background-color','green');
$(this).find('.desc').css('background-color','blue');
});
Now suppose , Lets say you set some background-color to your p and h2 elements .
CSS
.title{
background-color: green;
}
.desc{
background-color: blue;
}
SCRIPT
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').removeAttr('style');
$(this).find('.desc').removeAttr('style');
});
You can find all the children of the panel and change their backgroundcolor.
You can do this on mouseEnter:
$(".panel").children().css("background-color","red");
And on mouseLeave take another backgroundcolor.
And for the animation part, if you're working with simple background colors you could use animate().
...
function exchange(e)
{
var x = e.children(".title"),
y = e.children(".desc");
bg1 = x.css('background-color'),
bg2 = y.css('background-color');
x.animate({ "background-color": bg2 }, 1500);
y.animate({ "background-color": bg1 }, 1500);
}
...
Here you are a working example http://jsfiddle.net/9a1qe9q9/2/
jQuery
$(".panel").mouseenter(function () {
exchange($(this));
}).mouseleave(function () {
exchange($(this));
});
function exchange(e) {
var x = e.children(".title"),
y = e.children(".desc"),
xColor = x.css('background'),
yColor = y.css('background');
x.css("background", yColor);
y.css("background", xColor);
}
DOM
<div id="a">
<div id="b"></div>
<div>
<p>Insert me after #b</p>
Requirement is insert p tag after '#b', and when the insert operation happened again, only replace the p tag instead of adding more.
Thanks for your help
This will insert it directly after #b, within #a, but if it already exists, then it wont insert it again.
$(document).ready(function(){
if ($('#newP').length == 0) {
$('#b').append('<p id="newP">Insert me after #b</p>')
}
});
Try this:
function insertP(html)
{
var a = $("#a");
var p = a.find("p")
if(p.length == 0)
{
p = $("<p></p>").appendTo(a);
}
p.html(html)
}
This function will remove an existing element then add a new element. If one does not exist it will simply add the element.
<body>
<script type="text/javascript">
$(document).ready(function() {
function addAfterB(pElement) {
if (!$('#b ~ p')) {
$(pElement).insertAfter('#b');
} else if ($('#b ~ p')) {
$('#b ~ p').remove();
$(pElement).insertAfter('#b')
}
}
addAfterB('<p>New Item 1</p>');
});
</script>
<div id="a">
<div id="b"></div>
<p>hello</p>
<div>
You can use $.after()...
<div id="a">
<div id="b"></div>
<div>
...
<script>
$("#b").after("<p>Insert me after #b</p>");
</script>