So for my question you can refer to udacity.com main page.
Im trying to access this text -"The Udacity Difference" somewhere on the middle of the page.
I tried this :
d3.select("div.banner-content.h2.h-slim")
d3.select("div.banner-content.h-slim")
None of the above is working. So I tried looking in dev-tools element section for this page.
Then I could hover and see that :
div.banner-content has further
{div.container
{div.row
{div.col-xs-12 text-center
{h2.h-slim}}}}
Then I thought ok I shoud try if I can get the "container" atleast, but then even this
d3.select("div.banner-content.div.container")
OR
d3.select("div.banner-content.container")
doesnt work !!!!
Wheres the fault in logic ?
You can find nested elements using d3's chained syntax as shown below.
HTML:
<div class="banner-content">
<div class="container">
<h2 class="h-slim">Header</h2>
</div>
</div>
Code:
d3.select("div.banner-content").select("div.container").select("h2.h-slim")
EDIT: No need to type such long syntax. Just need to separate the selectors using a space.
d3.select("div.banner-content div.container h2.h-slim")
Code below will also give you the same results in this case. You can specifically add tags if necessary.
d3.select("div.banner-content .container .h-slim")
Related
<div id="container">
<div class="image">< img height="500px"src="./images/image-product-desktop.jpg" alt="">
<p>PERFUMES</p>
</div>
when I add a paragraph the div breaks into two parts, please help.enter image description here
You have to properly write the html markup by opening and closing the tags. The markup you shared has 2 <div> but you only closed one of them, when that happens the html parser of the browser will automatically try to close it for you which may end up doing unexpected results.
I suggest you to use an IDE like vscode and install extensions that will help you properly format your code and identify markup errors.
I recently started using JSoup to do HTML data scraping and I couldn't find enough detailed information on jsoup.org on how to find div classes that are nested within other div classes.
<div class="Food">
<a href="/eating/101" class="Eating">
<div class="Groceries">
<div class="Vegtables">
<div class="LeafyGreens"
<img src="https://RealisticBroccoli.svg" alt="" class="Broccoli-logo"></div>
<div class="Broccoli Fact">Fun Fact About Broccoli:</div>
</div></a></div>
<div class="Food">
<a href="/eating/102" class="Eating">
<div class="Groceries">
<div class="Vegtables">
<div class="LeafyGreens"
<img src="https://CartoonBroccoli.svg" alt="" class="Broccoli-logo"></div>
<div class="Broccoli Fact">Fun Fact About Broccoli:</div>
</div></a></div>
I created a simplistic version of a similar HTML project I am working on. I know it seems like there is an excessive amount of div tags, but its what is making this problem challenging for me. I wanted to scrape the HTML text for the Broccoli Fact that is produced when the A[href] is eating/101 without scraping the fact from eating/102.
From my experience I cannot scrape the "Broccoli Fact" class using one instruction, it doesn't produce any output either. I think that it has something to do with the a href "/eating/101". Thanks for the help!
From what I understand you may have one or both of these 2 problems:
1) In HTML it is possible to assign more than one class name to an element. This is what happens here with Broccoli Fact. These are actually two classes: Broccoli and Fact. In your CSS selector in Jsoup you may want to apply both classes as well. This can be achieved by simply concatenating the classes. Note that a class selector in JSopu CSS does contain the class-name with a preceding dot: .Broccoli and .Fact So concatenation gives you
div.Broccoli.Fact
2) In the HTML you give as an example there are more than 1 Broccoli Fact, but you only want to get the first one. There are several ways of dealing with this. Which one is the best is hard to tell without more context knowledge of your task. However, here are some suggestions:
a) gather all Fun Facts of Broccoli but only use the first one. Since Jsoup returns Elements, which implements the List interface, you can quite easily access the first element.
b) Use a more precise CSS selector. Something like this could work:
div.Food>a[href$=101] div.Broccoli.Fact
Have a look here to learn about JSoup CSS selectors: https://jsoup.org/cookbook/extracting-data/selector-syntax
This is what I want VS what I have:
https://jsfiddle.net/fs0vydgd/
<div class="left-align">
<div class="songListContainer">
<div id="outerBoundingBox">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ec/8d/bc/ec8dbcafb4aad7d54bbae197867c6c7c.jpg" class="albumArt" />
<div class="songTitle">Artist - Song name here</div>
<div class="songDetails">Year: 2002 Genre: Punk Album: Title</div>
</`div`></`div`></`div`>
I am trying to recreate an old website I worked on ages ago. I still have a screenshot of the layout which you can see. The album art image displays perfectly fine, but the lines of text with the song description don't line up appropriately. Even manually assigning margins has proven unsuccesful. My guess is that I have a problem with my parent/child setup in the way I am using display:inline-block, but I have tried multiple combinations to no success.
This is a difficuilt question to ask and better illustrated in the screenshot and JSfiddle provided.
Thanks for any help, I have not been able to find information regarding this specific case.
Start with adding float: left to .albumArt, I think you might already get a lot closer to your desired result.
Fiddle
On my webpage there are DIV's that are created dynamically with the class of jOUT.
I want to change the color of every other iteration of the class.
I'm trying to do it this way:
.jOUT:nth-child(even){
background:#eeefff;
}
.jOUT:nth-child(odd){
background:#cccffe;
}
My HTML is as follows:
<div id="outData">
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT">
<!-- ... -->
</div>
</div>
Full HTML here
But it's not working. What's really weird is that using the console in Chrome, when I select each jOUT, it shows ALL of them as having the "even" attribute.
I thought for sure that I had invalid CSS or HTML but I can't find it. It has to be something I'm doing, but what? I guess what I'm asking for is an idea for a place to start looking for the problem. I've verified the CSS using w3c CSS verification, and the HTML using HTML Tidy.
Your current CSS is working as it should, because you're targeting ALL children (including input); which means, in this scenario, all your div.jOUT are even - you should rather use :nth-of-type, which will only target instances of div.jOUT ...
.jOUT:nth-of-type(even){
background:#eeefff;
}
.jOUT:nth-of-type(odd){
background:#cccffe;
}
DEMO fiddle
This would work here:
.jOUT:nth-child(4n){
background:#eeefff;
}
More on that
This is somewhat fragile, though. A better approach is to add an alternative style class on those elements, possibly via your server-side app.
Your input[name="outDivider"] elements are in the way, thus making every jOUT element even. Here's a working pen where I took them out and made the selector work properly. I also changed the colors, so it's easier to see.
Edit: #isherwood beat me to it, but if this input[name="outDivider"] elements are absolutely necessary, his solution works best!
quick question here:
I am using DCE on Typo 6.1.5. I am trying to set an element out of the "container" div. But it rarely works.
<div id="contentMarginFix">..</div>
<div id="contact">
<div class="container">
<div class="gmaps">
</div>
</div>
</div>
I want to get the "gmaps" div in the "contact" div. Not in the "container" one.
Here is the DCE Template
http://gyazo.com/2c0a13746cdd834ebdb86a0b64fd10b1.png
And here is the template for the page
http://i.imgur.com/y2rwP6P.jpg
I was trying for two hours now maybe i just don't see it but i appreciate your help very much!
From the screenshots you provided I'd say it's possible the layout template is in the wrong place. Make sure the contact.html you use as a layout is in the right place.
If this is a basic fluid template directly in typo3 make sure the file is in the place you defined in your setup typoscript. Default would be something like this:
layoutRootPath = fileadmin/templates/Layouts/
If this is inside an extension the correct place for the layout template is
Resources\Private\Layouts
Be aware that in more recent extbase versions the naming conventions are more strict and require a capital first letter for the html files (so Contact.html)