I have this html page
<page>
<div class="results-list">
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
<div class="item paid-featured-item"></div>
</div>
</page>
and Inside each "item paid-featured-item", I have this:
<div class="item paid-featured-item">
<div class="somethign">
<div class="title">
This is the title
</div>
</div>
<div class="anotherthing">
</div>
</div>
I want to extract the title using xpath.
what I have tried
Container = "//div[#class='results-list']"
for item in Container:
title = "//div[#class='title']/text()"
I get 8 titles but each one is the title of the first item.
i am sure that is because i used //
what should I do please?
first
I don't want to use css selectors because it is not allowed in my work
second
I don't want to use class="something" because this div not always exist in my page.
third
i am using scrapy with python
fourth
appreciate your help
Say your page looks like (page.html):
<page>
<div id="results-list">
<div class="item paid-featured-item">
<div class="something">
<div class="title">Title 1</div>
</div>
<div class="anotherthing"></div>
</div>
<div class="item paid-featured-item">
<div class="something">
<div class="title">Title 2</div>
</div>
<div class="anotherthing"></div>
</div>
<div class="item paid-featured-item">
<div class="something">
<div class="title">Title 3</div>
</div>
<div class="anotherthing"></div>
</div>
<div class="item paid-featured-item">
<div class="something">
<div class="title">Title 4</div>
</div>
<div class="anotherthing"></div>
</div>
</div>
</page>
To extract each title, you do:
from scrapy.selector import Selector
sel = Selector(text=open('page.html').read())
container = sel.xpath('//div[#id="results-list"]')
items = container.xpath('.//div[#class="item paid-featured-item"]')
for item in items:
# *extracted* is a single-item list containing the title.
extracted = item.xpath('.//div[#class="title"]/text()').extract()
title = extracted[0]
print title
This will output:
Title 1
Title 2
Title 3
Title 4
Related
I want to pass the value in the comment text area when the a tag is clicked.Is there any other methods to pass both the comment and rating into the get method.I saw some similar questions but the answers where suggesting to use hidden input field to pass the value.But in my case i want the rating number in the clicked tag too.so i won't be able to use the hidden input method.
<form method='post'>
<div class="container-fluid py-4">
<div class="row">
<div class="col-lg-6 mx-auto mb-lg-0 mb-4">
<div class="card">
<div class="card-body p-4">
<h4 class="font-weight-bolder">Review</h4><br>
<div >
<textarea class="textarea p-3 w-100" placeholder="Write a review" cols = "40" rows="5"></textarea>
{{form.comment}}
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid py-4">
<div class="row">
<div class="col-lg-6 mx-auto mb-lg-0 mb-4">
<div class="card">
<div class="card-body p-4">
<h4 class="font-weight-bolder">Rating</h4><br>
<div class="rating rating2">
★
★
★
★
<a href="{% url 'ratings' 1 id %}" title="Give 1 star" data-value="1" type="submit">★
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
I'm trying to implement a "Count No. of Entries" and "Filtering" functionality to my List.js list, like in this example: Codepen. But in this implementation the list item data is part of the JS file itself and not of the HTML (what I would like to have). So I'm having problems "translating" this JS code for my list. What would I need to write in the JS file? Cf. Codepen Could you please help? 🙏
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Total Number:<span class="count"></span></p>
</div>
</div>
</div>
<div id="users">
<div class="container">
<div class="row">
<div class="col-md-12">
<input class="search form-control" placeholder="Search" />
<button class="sort btn btn-primary" data-sort="name">
Sort by name
</button>
<button class="sort btn btn-primary" data-sort="title">
Sort by title
</button>
<div class="tags">
<div>Filter by:</div>
<div class="tag filter" data-filter="Baseball">Baseball </div>
<div class="tag filter" data-filter="Kitties">Kitties </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group list">
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Alex</h4>
<p class="list-group-item-text title">Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Baseball</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Dennis</h4>
<p class="list-group-item-text title">Super Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Kitties</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
</div>
</div>
I'll try to ask this here, because on Foundation forums I got no answer.
I'm making a mixed layout and I want to use Equalizer to make the first column and the second column the same height. The catch is that the second column is another grid layout. Inside that second grid, Equalizer works like a charm, but between the first and second column it does nothing. I've searched here and there are a lot of people with similar problems, but I did not found a solution for mixed layout, even with simple jQuery functions.
Anyone can help?
Here's the code:
<div class="row">
<div class="large-12 columns">
<div class="row" data-equalizer>
<!-- first column -->
<div class="large-2 small-2 columns">
<div class="panel" data-equalizer-watch>
<!-- here goes an image -->
</div>
</div>
<!-- second column -->
<div class="large-10 small-10 columns" data-equalizer-watch>
<div class="row" data-equalizer>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
</div>
<div class="row">
<div class="large-12 small-12 columns">
<p class="panel">Longer text</p>
</div>
</div>
<div class="row" data-equalizer>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
</div>
<div class="row">
<div class="large-12 small-12 columns">
<p class="panel">Longer text</p>
</div>
</div>
</div>
</div>
</div>
I checked on version 5.2.2: you just cannot do this.
I looked at Foundation foundation.equalizer.js file,
this function is simply not suited for equalize an equalizer inside an equalizer.
In 5.2.2 version, at line 30, you can see how it select elements to equalize:
vals = equalizer.find('[' + this.attr_name() + '-watch]:visible')
There is no dinstinction between dom levels, it catches every data-equalizer-watch without looking for any data-equalizer inside a data-equalizer
This question is similar to one I asked earlier, but this time I am trying to achieve the layout using a different approach: grids, not block-grids.
I read ZURB's article on How to bridge rows in Foundation, but the end result deviates from my expectation. There is no margin between the first and the second row. So how do I get that margin to work, that you see in the picture at the article?
This is what I got so far: http://jsfiddle.net/NPUHy/
First approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 column">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-8 column">
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
</div>
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
Second Approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 columns">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
add a class to the row div<div class="row custom">, and then add a padding to the class
.row .custom {
padding-bottom: 10px;
}
updated fiddle http://jsfiddle.net/NPUHy/1/
In Rails 3.2 I was able to rename a extension to .handlebars.erb in order to be able to use erb tags (mainly <%= image_tag 'image.jpg' %>) in my handlebars templates.
I'm unable to get this going in Rails 4. Im using
gem 'ember-rails'
gem 'handlebars-source'
The error I'm getting:
undefined method `image_tag'
The view in question is the one below, same for any other view:
<div class="row-fluid">
<div class="span12">
<div class="row-fluid distance_0">
<div class="row-fluid divider slide_divider base_color_background">
<div class="container">
<span class="bottom_arrow"></span>
</div>
</div>
<!-- Title and Description -->
<div class="row-fluid slide_content fullwidth">
<div class="container">
<div class="row-fluid text_bar_pattern themeple_sc">
<div class="content_bar">
<h3>
</h3>
<p>
</p>
</div>
{{#linkTo "user.new" class="button_bar"}}{{/linkTo}}
</div>
</div>
</div>
<div class="row-fluid">
<div class="container">
<div class="bottom_shadow_full"></div>
</div>
</div>
<div class="row-fluid distance_2"></div>
<div class="row-fluid distance_2"></div>
<div class="row-fluid">
<div class="container">
<img src="images/old_letters_blur.jpg" alt="">
</div>
</div>
<%= image_tag 'old_letters_blur.jog' %>
<!-- TextBar -->
<!-- TextBar End -->
</div>
</div>
</div>
Any suggestions?