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>
Related
-- library.htm --
<iframe id="libcont" name="libcontent">
-- content.htm --
lorem ipsum <p name="scroll">lorem ipsum</p>
-- map.htm --
Read More...
Goal: clicking on the link within "map.htm" leads to "library.htm"
with "content.htm" already loaded into "libcont" iframe and scrolled
to the paragraph tagged "scroll". I can't find a HTML/CSS solution to this problem.
You can achieve this using javascript:
The anchor leads to library.htm, the onload function of library loads the iframe and uses scrollIntoView()(doc) to scroll to the right place.
map.htm
<!DOCTYPE html>
<html>
<body>
<h2>Map</h2>
Read More...
</body>
</html>
library.htm
<!DOCTYPE html>
<html>
<head>
<script>
loadContent = function() {
var frame = document.getElementsByName('libcontent')[0];
frame.onload = function() {
frames['libcontent'].document.getElementsByName('scroll')[0].scrollIntoView();
}
frame.src='content.htm';
};
</script>
</head>
<body onload="loadContent()">
<div style="height:1000px; background:gray;"> </div>
<h2>Library</h2>
<iframe id="libcontent" name="libcontent"></iframe>
<div style="height:1000px; background:gray;"> </div>
</body>
</html>
content.htm
<!DOCTYPE html>
<html>
<body>
<div style="height:1000px; background:black;"> </div>
<h2> Content </h2>
lorem ipsum <p name="scroll">lorem ipsum</p>
<div style="height:1000px; background:black;"> </div>
</body>
</html>
UPDATE: load different contents
To achieve this we are going to use a query parameter('content').
map.htm
<!DOCTYPE html>
<html>
<body>
<h2>Map</h2>
Content 1
Content 2
</body>
</html>
library.htm
<!DOCTYPE html>
<html>
<head>
<script>
loadContent = function() {
const urlParams = new URLSearchParams(window.location.search);
const content = urlParams.get('content');
// Check if the query param 'content' exists
if (content) {
var frame = document.getElementsByName('libcontent')[0];
frame.onload = function() {
frames['libcontent'].document.getElementsByName('scroll')[0].scrollIntoView();
}
// Loads the content
frame.src= content + '.htm#scroll';
}
};
</script>
</head>
<body onload="loadContent()">
<div style="height:1000px; background:gray;"> </div>
<h2>Library</h2>
<iframe id="libcontent" name="libcontent"></iframe>
<div style="height:1000px; background:gray;"> </div>
</body>
</html>
content2.htm
<!DOCTYPE html>
<html>
<body>
<div style="height:1000px; background:black;"> </div>
<h2> Content 2 </h2>
lorem ipsum <p name="scroll">lorem ipsum</p>
<div style="height:1000px; background:black;"> </div>
</body>
</html>
content1.htm
<!DOCTYPE html>
<html>
<body>
<div style="height:1000px; background:black;"> </div>
<h2> Content 1 </h2>
lorem ipsum <p name="scroll">lorem ipsum</p>
<div style="height:1000px; background:black;"> </div>
</body>
</html>
First of all, in content.htm use id instead of name for anchor:
<p id="scroll">lorem ipsum</p>
In map.htm use:
<a href='library.htm#scroll'>read more</a>
In library.htm use javascript to transfer the hash to the iframe URL:
<script>
document.getElementById('libcont').src = 'content.htm'+window.location.hash;
</script>
As result, the iframe will load as content.htm#scroll and scroll to the anchor.
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>
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>
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
Im having issues making the code below to work. Basically, I wanted to move an element by appending to body on mouseover. whats wrong with my code?
Thanks
<div class="wrp">
<p>this is a wrap</p>
<p><img src="myimg.jpg" /></p>
</div>
<div class="wrp">
<p>this is a wrap2</p>
<p><img src="myimg.jpg" /></p>
</div>
<div class="wrp">
<p>this is a wrap3</p>
<p><img src="myimg.jpg" /></p>
</div>
<script type="text/javascript">
$(".wrp").hover(function(){
$("img", this).appendTo("body");
});
</script>
expected output:
<html>
<head/>
<body>
...
<img src="myimg.jpg" />
</body>
</html>
Would be handy if you showed us the output that actually happened. But that's besides the point...
Try doing the following instead:
<script type="text/javascript">
$('.wrp > img').hover(function(){
$(this).appendTo('body');
});
</script>
I haven't tested it, it's off the top of my head. But it should work.