如何从HTML代码获取数据
[英]How to fetch data from html code
问题描述
我的html代码是
<div class="l-items l-items-list l-items-btn-right l-items-offset">
<div class="l-item l-item-minisite">
<div class="l-item-header">Women's Haircut</div>
<div class="l-item-details l-item-details--service-description">
Includes consultation, shampoo and blow-dry.
</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>1 hour</span>
<span>Starting at $80</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=a78335a4-7823-429a-80a1-1a0bc5cb48cd">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Men's Haircut</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>45 minutes</span>
<span>$60</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=af560b49-c416-43fa-b49b-7eb7dec0b6a1">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Color Retouch</div>
<div class="l-item-details l-item-details--service-description">
A color retouch for hair that was previously colored as needs to be touched up-no more than one inch of growth please.
This is not a touch up of highlights.
</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>1 hour 30 minutes</span>
<span>$90</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=8a49ffc6-7cbf-4f61-ba58-25ddd1fc67e5">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Color Retouch & Haircut</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>2 hours</span>
<span>Starting at $165</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=24c5eb1d-5cf8-4069-aabb-cb167d89b3e6">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">All Over Color</div>
<div class="l-item-details l-item-details--service-description">
Color from scalp to ends-whether a permanent tint or gloss.
Price depends on density and length.
</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>1 hour 45 minutes</span>
<span>Starting at $115</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=1f9b6c6c-9357-48fa-b9dc-3c2be8a25d7c">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">All Over Color & Haircut</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>2 hours</span>
<span>Starting at $185</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=10f38c3b-646e-449b-ace1-9194ecb0378c">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Partial Highlights</div>
<div class="l-item-details l-item-details--service-description">
Highlights at crown and sides of temples.
Price varies on overall length and density.
</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>2 hours</span>
<span>Starting at $150</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=fc55e36f-4c86-4c08-bf99-7eb34b3186ad">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Partial Highlights & Haircut</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>2 hours 30 minutes</span>
<span>Starting at $220</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=4a283be2-5ef8-4e21-9258-579a9d741513">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Full Highlights</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>2 hours</span>
<span>Starting at $175</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=a857c489-284f-440b-a3e0-bc8d1e57c420">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Full Highlights & Haircut</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>2 hours 30 minutes</span>
<span>Starting at $230</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=ef9f7e7b-cbec-4ca7-9dac-c8a5594045e4">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Keratin Complex Smoothing Solution</div>
<div class="l-item-details l-item-details--service-description">
The award winning signature treatment from Keratin Complex is a life changer that reduces frizz and curl, increases manageability and cuts daily styling time for up to four months.
</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>2 hours 30 minutes</span>
<span>Starting at $250</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=150ee97f-8a1a-4b2a-b4ab-427ba005a66a">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Shampoo & Blowout</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>1 hour</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=d0683b43-e645-4693-a55e-702fce4f8155">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Bleach & Tone</div>
<div class="l-item-details l-item-details--service-description">
Bleach and tone of new growth only -not to exceed more than one inch for even lifting.
Note-this is not a virgin bleach and tone. For that service please email or phone.
</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>2 hours</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=879d8856-5a5c-406a-893c-c546d63b9bf0">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Consultation</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>15 minutes</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=66fcf320-9ddb-4898-8935-862d34b1c2fd">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Keratin Express Blowout</div>
<div class="l-item-details l-item-details--service-description">
This express service reduces frizz and blowout time. Lasts up to 6 weeks.
</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>1 hour 30 minutes</span>
<span>Starting at $130</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=aa68ae07-a94e-4bd2-b116-05d86de95286">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Men's Cleanup</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>15 minutes</span>
<span>$15</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=44660f95-3a09-4b87-9487-59d927afd44e">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Balayage/Ombre</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>3 hours</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=8331ff7c-4e5e-414e-8517-a6f71a4c3dc0">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
<div class="l-item l-item-minisite">
<div class="l-item-header">Men's Grey Blending + Haircut</div>
<div class="l-item-footer">
<div class="l-app-price">
<span>1 hour 30 minutes</span>
<span>Starting at $105</span>
</div>
</div>
<div class="l-item-action">
<a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=062b86d1-a39d-4ce2-9567-9184eeace25d">
<button class="button--blue">Book Now</button>
</a>
</div>
</div>
</div>
我想迭代此主div，以从每个子div获取每个数据。 有什么方法可以将此数据转换为jquery中的任何数组。 我试图-
$('div.l-items.l-items-list.l-items-btn-right.l-items-offset').each(function(){
var serviceName = $(this).find('div.l-item-header').text();
})
但我将所有服务名称作为一个元素。
我想要：
[{"serviceName":"Women's Haircut", "price": "$80" }, {}, {}, ...]
我该怎么办？
有人能帮我一下吗？
2 个解决方案
解决方案1
1 2016-12-12 15:52:27
要根据jQuery选择器中元素的属性构建数组，可以使用map()方法并从中返回一个对象，如下所示：
var arr = $('.l-items .l-item').map(function() { return { serviceName: $(this).find('.l-item-header').text(), price: $(this).find('.l-app-price span:eq(1)').text() } }).get(); console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="l-items l-items-list l-items-btn-right l-items-offset"> <div class="l-item l-item-minisite"> <div class="l-item-header">Women's Haircut</div> <div class="l-item-details l-item-details--service-description"> Includes consultation, shampoo and blow-dry. </div> <div class="l-item-footer"> <div class="l-app-price"> <span>1 hour</span> <span>Starting at $80</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=a78335a4-7823-429a-80a1-1a0bc5cb48cd"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Men's Haircut</div> <div class="l-item-footer"> <div class="l-app-price"> <span>45 minutes</span> <span>$60</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=af560b49-c416-43fa-b49b-7eb7dec0b6a1"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Color Retouch</div> <div class="l-item-details l-item-details--service-description"> A color retouch for hair that was previously colored as needs to be touched up-no more than one inch of growth please. This is not a touch up of highlights. </div> <div class="l-item-footer"> <div class="l-app-price"> <span>1 hour 30 minutes</span> <span>$90</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=8a49ffc6-7cbf-4f61-ba58-25ddd1fc67e5"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Color Retouch & Haircut</div> <div class="l-item-footer"> <div class="l-app-price"> <span>2 hours</span> <span>Starting at $165</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=24c5eb1d-5cf8-4069-aabb-cb167d89b3e6"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">All Over Color</div> <div class="l-item-details l-item-details--service-description"> Color from scalp to ends-whether a permanent tint or gloss. Price depends on density and length. </div> <div class="l-item-footer"> <div class="l-app-price"> <span>1 hour 45 minutes</span> <span>Starting at $115</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=1f9b6c6c-9357-48fa-b9dc-3c2be8a25d7c"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">All Over Color & Haircut</div> <div class="l-item-footer"> <div class="l-app-price"> <span>2 hours</span> <span>Starting at $185</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=10f38c3b-646e-449b-ace1-9194ecb0378c"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Partial Highlights</div> <div class="l-item-details l-item-details--service-description"> Highlights at crown and sides of temples. Price varies on overall length and density. </div> <div class="l-item-footer"> <div class="l-app-price"> <span>2 hours</span> <span>Starting at $150</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=fc55e36f-4c86-4c08-bf99-7eb34b3186ad"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Partial Highlights & Haircut</div> <div class="l-item-footer"> <div class="l-app-price"> <span>2 hours 30 minutes</span> <span>Starting at $220</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=4a283be2-5ef8-4e21-9258-579a9d741513"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Full Highlights</div> <div class="l-item-footer"> <div class="l-app-price"> <span>2 hours</span> <span>Starting at $175</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=a857c489-284f-440b-a3e0-bc8d1e57c420"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Full Highlights & Haircut</div> <div class="l-item-footer"> <div class="l-app-price"> <span>2 hours 30 minutes</span> <span>Starting at $230</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=ef9f7e7b-cbec-4ca7-9dac-c8a5594045e4"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Keratin Complex Smoothing Solution</div> <div class="l-item-details l-item-details--service-description"> The award winning signature treatment from Keratin Complex is a life changer that reduces frizz and curl, increases manageability and cuts daily styling time for up to four months. </div> <div class="l-item-footer"> <div class="l-app-price"> <span>2 hours 30 minutes</span> <span>Starting at $250</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=150ee97f-8a1a-4b2a-b4ab-427ba005a66a"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Shampoo & Blowout</div> <div class="l-item-footer"> <div class="l-app-price"> <span>1 hour</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=d0683b43-e645-4693-a55e-702fce4f8155"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Bleach & Tone</div> <div class="l-item-details l-item-details--service-description"> Bleach and tone of new growth only -not to exceed more than one inch for even lifting. Note-this is not a virgin bleach and tone. For that service please email or phone. </div> <div class="l-item-footer"> <div class="l-app-price"> <span>2 hours</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=879d8856-5a5c-406a-893c-c546d63b9bf0"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Consultation</div> <div class="l-item-footer"> <div class="l-app-price"> <span>15 minutes</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=66fcf320-9ddb-4898-8935-862d34b1c2fd"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Keratin Express Blowout</div> <div class="l-item-details l-item-details--service-description"> This express service reduces frizz and blowout time. Lasts up to 6 weeks. </div> <div class="l-item-footer"> <div class="l-app-price"> <span>1 hour 30 minutes</span> <span>Starting at $130</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=aa68ae07-a94e-4bd2-b116-05d86de95286"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Men's Cleanup</div> <div class="l-item-footer"> <div class="l-app-price"> <span>15 minutes</span> <span>$15</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=44660f95-3a09-4b87-9487-59d927afd44e"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Balayage/Ombre</div> <div class="l-item-footer"> <div class="l-app-price"> <span>3 hours</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=8331ff7c-4e5e-414e-8517-a6f71a4c3dc0"> <button class="button--blue">Book Now</button> </a> </div> </div> <div class="l-item l-item-minisite"> <div class="l-item-header">Men's Grey Blending + Haircut</div> <div class="l-item-footer"> <div class="l-app-price"> <span>1 hour 30 minutes</span> <span>Starting at $105</span> </div> </div> <div class="l-item-action"> <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=062b86d1-a39d-4ce2-9567-9184eeace25d"> <button class="button--blue">Book Now</button> </a> </div> </div> </div>
解决方案2
0 2016-12-12 15:54:32
你可以这样做
var items = [];
$('div.l-items .l-item').each(function(){
var serviceName = $(this).find('div.l-item-header').text();
var price = $(this).find('.l-item-footer .l-app-price span:eq(1)').text();
items.push({serviceName: serviceName, price: price});
})
如何在Highcharts的同一页面上从HTML DIV获取JSON数据？
[英]How to fetch JSON data from HTML DIV on same page for Highcharts?
如何从`.txt`或`.css`文件中获取html选项标签中的数据？
[英]How to fetch data in option tags in html from a `.txt` or `.css` file?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.