How do I extract data under different div class? I can only get it with span.field-content but not with div
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-acronym">
<span class="field-content">15CBOOKTRADE</span>
</div>
<div class="views-field views-field-title">
<span class="field-content">The 15th-century Book Trade: An Evidence-based Assessment and Visualization of the Distribution, Sale, and Reception of Books in the Renaissance</span>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<div class="views-field views-field-acronym">
<span class="field-content">2D-CHEM</span>
</div>
<div class="views-field views-field-title">
<span class="field-content">Two-Dimensional Chemistry towards New Graphene Derivatives</span>
</div>
</div>
</div>
Check this out
from scrapy.selector import Selector
body = '''
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-acronym">
<span class="field-content">15CBOOKTRADE</span>
</div>
<div class="views-field views-field-title">
<span class="field-content">The 15th-century Book Trade: An Evidence-based Assessment and Visualization of the Distribution, Sale, and Reception of Books in the Renaissance</span>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<div class="views-field views-field-acronym">
<span class="field-content">2D-CHEM</span>
</div>
<div class="views-field views-field-title">
<span class="field-content">Two-Dimensional Chemistry towards New Graphene Derivatives</span>
</div>
</div>
</div>
'''
for n in Selector(text=body).xpath('//span[#class="field-content"]/text()'):
print(n.get())
Output
15CBOOKTRADE
The 15th-century Book Trade: An Evidence-based Assessment and Visualization of the Distribution, Sale, and Reception of Books in the Renaissance
2D-CHEM
Two-Dimensional Chemistry towards New Graphene Derivatives
Related
I created a recipe website, you can find it here https://hungry-vegetarian.com/.
The tab on the index page is a vue instance. I'm trying to create a search bar that is also a vue instance.
The problem occurs when I try to display searched recipes on the index page. It just shows the search result on top of the search bar.
Ideally, only searched recipes should appear on the tab just like they are now but without any indications on top of the tab like Breakfast, Salad, Bakery, etc.
I don't know how to make two objects work together. For now, they work separately without communicating with each other.
SEARCH
<div id="search">
<div class="main-search">
<h1 class="search-question">What are you in the mood for?</h1>
<div class="search-box">
<input type="text" v-model="searchQuery" class="input-search" placeholder="Bread">
<button class="btn-search"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="container">
<div class="recipe" v-for="post in filteredList">
<div v-if="searchQuery">
<a v-bind:href="post.url" class="recipe-card__card-link" target="_blank">
<img v-bind:src="post.image" alt="" class="recipe-card__image"/>
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{post.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{post.body}}</p>
<a v-bind:href="post.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
tab
<main id="tab">
<header>
<nav>
<ul>
<div id="arrow">
<span></span>
<span></span>
<span></span>
</div>
<li v-for="(tab, tabName) in tabs" :key="tabName">
<button class="tab" #click="setTabActive(tabName)" :class="{'active': tabName === activeTab}">
<span class="tab-copy">{{ tabName }}</span>
<span class="tab-background">
</span>
</button>
</li>
</ul>
</nav>
</header>
<article>
<div class="container">
<transition name="fade" mode="out-in" appear :duration="500">
<tab-content v-for="(tabContent, t) in tabs" :data="tabContent" :key="'content'+t" v-if="t === activeTab" inline-template>
<div class="content-wrapper">
<div class="recipes" v-for="(recipe, i) in data.recipes" :key="i">
<a v-bind:href="recipe.url" class="recipe-card__card-link"></a>
<img :src="recipe.image" alt="" class="recipe-card__image">
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{recipe.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{recipe.body}}</p>
<a v-bind:href="recipe.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</tab-content>
</transition>
</div>
</article>
</main>
I tried to combine instances search and tab into just one instance tab, but it always gives me a Vue warning:
[Vue warn]: Property or method "searchQuery" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Also, I feel like I can have just the wrong approach to this problem I am trying to solve. Please, any suggestions are welcome. I am stuck.
I am trying to select an element using CSS selector (and have tried XPath also).
<div data-sheetstartpoint="1">
<div class="booking">
<div class="startsheet two">
<div class="title">
<div class="time">Time</div>
<div class="cols">
<div class="hidden-xs two">Team 1</div>
<div class="hidden-xs two">Team 2</div>
<div class="visible-xs two">Teams</div>
</div>
</div>
<div class="slot" data-startpointno="1">
<div class="time" id="timelabel"> 07:30 </div>
<div class="cols">
<div class="timeslot " data-roundteamid="" data-slotno="1" data-time="17/04/2021 06:30:00" data-startpointno="1" data-offset="0" data-bookingname="">
<span class="available-to-book">Available </span>
</div>
<div class="timeslot " data-roundteamid="" data-slotno="2" data-time="17/04/2021 06:30:00" data-startpointno="1" data-offset="0" data-bookingname="">
<span class="available-to-book">Available </span>
</div>
</div>
</div>
I have made a CSS selector (and have also looked using Chropath)
I am getting an element not found error.
The selectors I am using
FindElementByCss(".timeslot[data-slotno*='1'][data-time*='17/04/2021 06:30:00']")
FindElementByXPath("//*[#id='hdidbookingcontent']/div[2]/div[1]/div/div[3]/div[2]/div[1]")
I see further up the page there is a class "container" - is this something that would impact selection?
Working with bs4. When trying to find html info inside <div data-reactroot> I am never able to locate it.
Inside <div data-reactroot> I am going to have to loop through each text entry and split it. I get how to find a normal tags but data-reactroot seems to be giving me a lot of trouble.
<div data-reactroot="">
<div>
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div class="_1p3joamp">Entire guest suite</div>
<div class="_36rlri">
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">2 guests</div>
</div>
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">1 bedroom</div>
</div>
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">1 bed</div>
</div>
<div class="_36rlri" style="margin-right:0">
<div class="_czm8crp">1 bath</div>
</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Self check-in</span></div>
<div class="_czm8crp">Check yourself in with the keypad.</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Sparkling clean</span></div>
<div class="_czm8crp">9 recent guests said this place was sparkling clean.</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Michael & Tammy is a Superhost</span></div>
<div class="_czm8crp">Superhosts are experienced, highly rated hosts who are committed to providing great stays for guests.</div>
</div>
</div>
</div>
<div style="margin-top:24px;margin-bottom:24px">
<div class="_7qp4lh"></div>
</div>
</div>
</div>
I have tried:
data_soup.find_all("div data-reactroot")
data_soup.get('data-reactroot')
I have an upload component that previews selected images before the user can upload them to the server.
I want to display a maximum of 3 on the desktop and a maximum of 2 on the tablet and 1 on the mobile.
I don't know how many images the user will upload so it is a dynamic amount.
An example of an upload would generate something like this for 4 files.
<div>
<div>
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail">
<div class="caption">
<h3><span>obomber.jpg</span></h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/498e5d16-114e-41b5-8d4d-4e798c36861c" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail>
<div class="caption">
<h3><span>podcasts.png</span></h3>
<p>Delete</p>
</div>
<img src="blob:http%3A//localhost%3A3030/08a89a31-6822-4436-a8be-e89ddfee9f0f" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail">
<div class="caption">
<h3><span>tangents.png</span></h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/ae1c844f-f0d2-4a50-a0b1-c46b4c00a4ba" class="img-thumbnail">
</div>
</div>
</div>
So as some said in a comment use the bootstrap grid system, very useful and this can all be achieved by doing using this
http://getbootstrap.com/css/#grid
Here is something that you might be able to use sorry on my phone at the moment might be rough:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
</div>
</div>
I have an accordion which I am placing inside of a carousel, it works fine but I cannot seem to get the position of the header to stay and the footer to be relative(it pushes upwards, rather than opening downward) if anyone has any clue please let me know(text is dummy text and will be replaced so ignore that please) I have tried changing the header position to absolute but it does nothing, and am not seeing anything regarding elemental inheritance that should be causing this, thank you!
Bootstrap Libraries:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
HTML
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/a100Logo.png" alt="...">
<div class="carousel-caption">
<p class="headerLightBG">Sample Training Sessions</p>
<p class="textLightBG">
Beginning Front-End Web Development<br />
Introduction to Programming<br />
Intermediate Front-End Web Development: Web Applications<br />
Rapid Prototyping and Iterative Development <br />
Advanced Front-End Web Development: Mobile/Responsive Design <br />
Mobile Application Development: iOS/Android <br />
</p>
</div>
</div>
<div class="item">
<img src="assets/img/a100Logo.png" alt="...">
<div class="carousel-caption">
<p class="headerLightBG">Sample Projects</p>
<p class="textLightBG">
Write a program that successfully interacts with a commercial API.<br />
Create a dynamic front end for an iPhone or Android app.<br />
Design an engaging new web site for a technology company.<br />
Create a database system for matching Apprentices to Companies.<br />
Create a web application that allows consumers to locate fresh produce nearby.<br />
</p> </div>
</div>
<div class="item">
<img src="assets/img/a100Logo.png" alt="...">
<div class="carousel-caption">
<div class="col-lg-6">
<div class= "rightMargin">
<div class="panel-group" id="accordion">
<div class= "panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#FaqCost">
<div class= "panel-heading textLightBG headingColor">
<h4 class="panel-title fatFont">
Does A100 cost me anything?
</h4>
</div>
</a>
<div class="panel-collapse collapse" id="FaqCost">
<div class= "panel-body accText textDarkBG">
No! The program is completely free to Apprentices. This is because A100 is an initiative of Independent Software, with support from Connecticut Innovations and our Partner Companies.
</div>
</div>
</div>
<div class= "panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#FaqTime">
<div class= "panel-heading textLightBG headingColor">
<h4 class="panel-title fatFont">
What kind of time commitment does A100 require?
</h4>
</div>
</a>
<div class="panel-collapse collapse" id="FaqTime">
<div class= "panel-body accText textDarkBG">
The A100 training program requires a commitment of about 10-15 hours per week, including time spent in training sessions. The Program runs 2.5 months and repeats every quarter. Apprentices have been successful in the Program while also maintaining a rigorous academic schedule. A strong work ethic and willingness to learn new things is expected of all Apprentices.
</div>
</div>
</div>
<div class= "panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#FaqSchedule">
<div class= "panel-heading textLightBG headingColor">
<h4 class="panel-title fatFont">
What formal meeting times will I have to attend A100
</h4>
</div>
</a>
<div class="panel-collapse collapse" id="FaqSchedule">
<div class= "panel-body accText textDarkBG">
<p class="textDarkBG topMarginSmall centered">
While the schedule does change quarterly to suit the needs of the current Cohort, here is a sample schedule that Apprentices in the Spring Cohort of 2014 are expected to adhere to.
</P>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class= "leftMargin">
<div class="panel-group" id="accordion2">
<div class= "panel panel-default">
<a data-toggle="collapse" data-parent="#accordion2" href="#FaqFromMe">
<div class= "panel-heading textLightBG headingColor">
<h4 class="panel-title fatFont">
What does A100 want from me?
</h4>
</div>
</a>
<div class="panel-collapse collapse" id="FaqFromMe">
<div class= "panel-body accText textDarkBG">
In exchange for the training and opportunities we afford you to connect with local companies (as well as the free food!), we require that you sign an agreement to seek a paid apprenticeship at one of our Partner Companies in the month after graduating from the Program, and that you work there for at least three months. For more info, please read the full Terms and conditions of the Program.
</div>
</div>
</div>
<div class= "panel panel-default">
<a data-toggle="collapse" data-parent="#accordion2" href="#FaqSkills">
<div class= "panel-heading textLightBG headingColor">
<h4 class="panel-title fatFont">
How much programming experience do I need to apply?
</h4>
</div>
</a>
<div class="panel-collapse collapse" id="FaqSkills">
<div class= "panel-body accText textDarkBG">
Basic programming skills are needed in an object-oriented language of your choice (C++, Java, Python, Scala, Ruby, PHP, etc.), as well as some familiarity with HTML and CSS. Don't worry! We use a programming challenge as part of our application process to make sure everyone begins from a good platform – so you
</div>
</div>
</div>
<div class= "panel panel-default">
<a data-toggle="collapse" data-parent="#accordion2" href="#FaqTeach">
<div class= "panel-heading textLightBG headingColor">
<h4 class="panel-title fatFont">
What will A100 teach me?
</h4>
</div>
</a>
<div class="panel-collapse collapse" id="FaqTeach">
<div class= "panel-body accText textDarkBG">
A100 will teach you how to create working software products as part of a small development team. You'll learn the LAMP stack (Linux-Apache-MySQL-PHP), as well as improve your front end (HTML/CSS/JavaScript) development skills. We'll also expose you to practices used by working developers from the Connecticut tech
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF THE ACCORDION-->
</div>
</div>
</div><!-- carousel inner close-->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- carousel close-->
</div><!-- row close-->
</div><!-- container close-->
</section>
CSS:
/* Accordion*/
.headingColor:hover
{
-webkit-transition: color 1s;
-moz-transition: color 1s;
-ms-transition: color 1s;
-o-transition: color 1s;
transition: color 1s;
color: #777;
}
.panel-heading a,
.panel-heading a:focus, .headingColor {
text-decoration: none;
color: #006496;
}
.accText
{
Background: #006496;
}
.unstyledList
{
list-style-type: none;
}
.fatFont{
font-weight: 600;
}
This is part of a much larger website, but this is the only section affected, and the accordion looks like it works fine when not placed within the carousel, perhaps that is just an issue of relative movement that the carousel brings to the users attention(I am very new to bootstrap), if so please let me know if this is impossible to fix
thanks!
panel heading and body needed to have overflow hidden tricks done to them