I have html that looks something like the below.
dataId below is the data-id that has just been scrolled over. At this point I want to get the closes data-id to this element. I have taken many approaches, unfortunately none of which are working.
<div data-id='12345'>
<p>hello there</p>
</div>
<div class='break'>
<p>no man's land</p>
</div>
<div data-id='5678'>
<p>Go for it</p>
</div>
<div class='test'>
<p>just a test</p>
</div>
<div class='example'>
<p>example</p>
</div>
<div data-id='5789'>
<p>Last one</p>
</div>
The js looks like this:
const firstDiv = $('div').attr('data-id["12345"]')
const nextDiv = firstDiv.next().attr('data-id');
// I am looking for the nextDiv to give me 5678
Related
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
I'm trying to extract the text from within the div tag (Refer Code) (that is I need to extract "Stackoverflow to your rescue!")
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="five">
<div class="text_desc">
<p itemprop="description">
<p>
<div>
Stackoverflow to your rescue!
</div>
</p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to scrape using scrapy in python, but I don't understand why response.selector.xpath('//div[#class="text_desc"]').extract() returns an empty list. So I'm unable to write queries to extract the text. Tell me how should I go about it! (A solution using cssSelectors would also do)
I want to make Jade mixin which will output something like this
<div class="progress__graph">
<div class="progress__bar two">
<p>Web Design 80%</p>
</div>
</div>
<div class="progress__graph">
<div class="progress__bar three">
<p>Web Design 80% </p>
</div>
</div>
So far I have this but I can't figure out how to make it so I can add classes as well ( 'two', 'three' etc)
mixin progress(text)
.progress__graph
.progress__bar
p #{text}
You can use the following mixin in jade:
mixin progress(text, className)
.progress__graph
.progress__bar(class=className)
p #{text}
+progress('Text goes here', 'one')
+progress('More text here', 'two')
Which will render the following HTML:
<div class="progress__graph">
<div class="progress__bar one">
<p>Text goes here</p>
</div>
</div>
<div class="progress__graph">
<div class="progress__bar two">
<p>More text here</p>
</div>
</div>
Hope that helps. You can see an example of this here - http://codepen.io/AdamCCFC/pen/dXdWXy
Hi i want to only display the div id placeholder1, placeholder2, etc once i click different buttons. but i am not sure how to start on it. do help me, thank you :-) below are my codes for the different div ids.
<div id="content">
<div class="demo-container">
<div id="placeholder1" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview1" class="demo-placeholder"></div>
</div>
<p>Carbon Dioxide Reading</p>
<div class="demo-container">
<div id="placeholder2" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview2" class="demo-placeholder"></div>
</div>
<p>Gas Reading</p>
<div class="demo-container">
<div id="placeholder3" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview3" class="demo-placeholder"></div>
</div>
<p>Humidity Reading</p>
<div class="demo-container">
<div id="placeholder4" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview4" class="demo-placeholder"></div>
</div>
<p>Temperature Reading</p>
<div class="demo-container">
<div id="placeholder5" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview5" class="demo-placeholder"></div>
</div>
</div>
To show a div when a button is clicked, you can add this to your CSS:
.demo-placeholder {
display: none;
}
Then, for example, this is your button:
<input type="button" id="but1" class="buttons" onclick="showDiv1()">Show Button 1
Then add this to your JavaScript:
function showDiv1(){
document.getElementById("placeholder1").style.display = 'block';
}
NOTE
When you want to do this for multiple buttons, make sure to NOT use the same funciton, but change the numbers to the div you want to show. If you need more help with this, just let me know and I'll update my answer.
I hope this helped you!
This is very basic JQuery code:
$("#ph1").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder1").show();
});
$("#ph2").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder2").show();
});
$("#ph3").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder3").show();
});
$("#ph4").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder4").show();
});
$("#ph5").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder5").show();
});
Here is the JSFiddle demo
I added buttons with ids ph1, ph2 etc...
and clicking on the button performs the follow:
$("[id^='placeholder']").hide(); hides all elements that have placeholder text in their ID
$("#placeholder1").show(); shows the element with the defined ID (in this case placeholder1)
I would like to select only the p tag without any attributes from the following html code.
<div id="review">
<div class="partial_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p class="partial_entry>it was a good...</p>
</div>
</div>
</div>
</div>
<div class="full_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p>it was a good trip.</p>
</div>
</div>
</div>
</div>
</div>
I have tried //div[#class='entry']/p[not class = 'partial_entry']/text(). But, its not working.
If you want all p elements with no attributes at all then the simplest path would be
//p[not(#*)]
If you want to check for the absence of class specifically then
//p[not(#class)]