Hello I simply wanna highlight the fist element....
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $element = $(".intro");
$element[0].css("bbroswerackground-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">This paragraph has class "intro".</p>
<p>This is a paragraph.</p>
<p class="intro">This paragraph has class "intro".</p>
<p>This is another paragraph.</p>
<p class="intro">This paragraph has class "intro".</p>
</body>
</html>
This should works :
$(".intro").eq(0).css("background-color", "yellow");
EDIT : you have an error in background syntax.
EDIT 2 : please next time search by yourself
If you wish to apply/set certain property on the 1st element.
Using .first() filter
$(".intro").first().css("background-color", "yellow");
Example : https://jsfiddle.net/DinoMyte/4y80has5/
Using :first selector :
$(".intro:first").css("background-color", "yellow");
Example : https://jsfiddle.net/DinoMyte/4y80has5/1/
You may also do this without JQuery using CSS3 selector like this:
<!DOCTYPE html>
<html>
<head>
<style>
p.intro:first-of-type {
color:red;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">This paragraph has class "intro".</p>
<p>This is a paragraph.</p>
<p class="intro">This paragraph has class "intro".</p>
<p>This is another paragraph.</p>
<p class="intro">This paragraph has class "intro".</p>
</body>
</html>
Related
I'm doing a simple class selection like this:
var myItem = $("#div-id h3.class-name");
this selection used to return just one item, but I added some code that may add more elements which has such class name. I would like to put in the variable the value of the only item (if there's one) or of the last (if it has many).
I've tried this but I get an error which says that length() is not a function.
var myItem = $("#div-id h3.class-name");
if (myItem.length() > 0){
myItem = myItem.last();
console.log("it has multiple items");
}
Can you help me understand how to achieve this?
Thank you!
I think it can help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test:last").toggle();
});
});
</script>
</head>
<body>
<h2 id="test">This is a heading</h2>
<p id="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
I would like to scrape the contents of a DIV based on a class within the DIV for example, my page would contain
<html>
<head></head>
<body>
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
</body>
</html>
The result would be:
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
I have tried
$.get("https://some.url.com/index.html", function(my_var) {
console.log($(my_var).closest('div').find('.foo'));
});
But just get an empty result?
You should first find .foo and then select parent of it using .closest()
$.get("https://some.url.com/index.html", function(my_var) {
console.log($(my_var).find(".foo").closest('div'));
});
$(".foo").closest("div").css("color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
body
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
body
</body>
</html>
For Better approach need to target body first than find your particular class find('.foo') you can view the working example as below :
$(document).ready(function(){
$('body').closest('body').find('.foo').css("color", "red")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
The following is what my HTML document looks like:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="scripts/homepage-script.js"></script>
</head>
<body>
<div id="how-it-works">
<p>How It Works</p>
<img src="some-imageurl">
<div id="steps">
<p>Step 1</p>
<p>Step 2</p>
<p>Step 3</p>
</div>
And here is my script:
$('#steps > p').on('click' , function(){
$('steps > p').css('background', 'yellow');
});
Why is my script not running on my website?
You need to wrap the jQuery in a document ready and you can use $(this) since it is targetted in the onclick event:
$(document).ready(function(){
$('#steps > p').on('click',function(){
$(this).css('background', 'yellow');
});
})
however what I would recommend is having a highlight class that is then toggled in the onclick event;
//CSS
.highlight{background:yellow}
$(document).ready(function(){
$('#steps > p').on('click',function(){
$(this).toggleClass('highlight');
});
})
Tht way you are adding / removing a class instead of altering the elements CSS.
If you want to add the highlight class to all the p's in that div as per #Phil comment -
$(document).ready(function(){
$('#steps > p').on('click',function(){
$('#steps > p').toggleClass('highlight');
});
})
$(document).ready(function(){
$('#steps > p').on('click',function(){
$(this).toggleClass('highlight');
});
})
.highlight{background:yellow}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="scripts/homepage-script.js"></script>
</head>
<body>
<div id="how-it-works">
<p>How It Works</p>
<img src="some-imageurl">
<div id="steps">
<p>Step 1</p>
<p>Step 2</p>
<p>Step 3</p>
</div>
</body>
</html>
You are missing the # selector in your nested line of code:
$('#steps > p').css('background', 'yellow');
This will make all of the p elements turn to a yellow background. If you only want the element the user clicked, then reference the "selected" object with $(this):
$('#steps > p').on('click' , function(){
$(this).css('background', 'yellow');
});
The script should be after the div.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="how-it-works">
<p>How It Works</p>
<img src="some-imageurl">
<div id="steps">
<p>Step 1</p>
<p>Step 2</p>
<p>Step 3</p>
</div>
<!--The script should be after the div.-->
<script src="scripts/homepage-script.js"></script>
I'm new to JQuery and I would want like to know how to apply the .toggle() method only in clicked DIV instead of the all DIVs of the page.
Can anyone help me?
PS: I need implement in the JQuery version 1.4
This is my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle2').live("click", function() {
$('.toggle2').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 1</p>
<p class="toggle2" style="display:none;">BACK 1</p>
</div>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 2</p>
<p class="toggle2" style="display:none;">BACK 2</p>
</div>
</body>
Thanks in advance!
$(function() {
$('#toggle2').live("click", function() {
$(this).parent().find('.toggle2').toggle();
return false;
});
});
ID's are unique, and this will probably only work on the first occurence of #toggle, so you'll need to use classes there as well.
FIDDLE
i am a beginner to java script.i do the bellow code for changing the text color into red using java script.But it doesn't work.what is the error in my code?
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Remove innerHTML from var col=document.getElementById("demo").innerHTML;
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo");
col.style.color="#FF0000";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button below.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Dont use the innerHTML, it returns a String.
Use the style on the object itself.
Check out it working: JsFiddle
You can try this ...
document.getElementById('demo').style.color = '#FF0000';
Replace this code:
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
with this:
function display()
{
var col=document.getElementById("demo");
col.style.color="red";
}
Inner html would contain the html inside the demo tag, but you need to refer to the tag itself.
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
document.getElementById("demo").style.color="red";
}
</script>
</head>
<body>
<h1>Your Fixed JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Here's the fixed one I just made the change of the words turn red because it wasn't