我的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" }, {}, {}, ...]
我怎么能这样做?
任何人都可以帮助我吗?
答案 0 :(得分:1)
要从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>
答案 1 :(得分:0)
你可以这样做
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});
})