Wie holen Daten aus HTML-Code

Question

Mein HTML-Code ist

<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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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> 

ich diese Haupt div iterieren wollen jeweils Daten von jedem Unter div zu erhalten. Gibt es eine Möglichkeit, diese Daten in ein Array in Jquery zu konvertieren. Ich habe versucht, zu -

$('div.l-items.l-items-list.l-items-btn-right.l-items-offset').each(function(){ 
    var serviceName = $(this).find('div.l-item-header').text(); 
}) 

aber ich bin alle Service-Namen als ein einzelnes Element zu bekommen.

Ich möchte:

[{"serviceName":"Women's Haircut", "price": "$80" }, {}, {}, ...] 

Wie ich das tun könnte?

kann mir hier jemand helfen?

Answer 1

Um ein Array aus den Attributen von Elementen innerhalb einer jQuery-Selektor bauen Sie die map() Methode verwenden können und ein Objekt von ihm zurückkehren, wie folgt aus:

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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

Answer 2

Sie dies tun können

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}); 
})