Question

I understand closure somewhat, but sometimes I can’t seem to get it right. I believe this to be the culprit here… Since i’m traversing tho, i’m not sure if closure is necessary or possible.

So I have to parse some external markup that looks like this:

<h2>Fried Calamari</h2>
<dd>Price:$8.95</dd>
<dd>Pan-fried calamari served with our delicious homemade tomato sauce.</dd>
<h3>Extra Sauce</h3>
<dd>Required:0 / Up To:99</dd>
<ol>
<li><dt>Extra Sauce</dt><dd>Price:$0.99</dd></li>
</ol>
<h2>Fried Zuchinni</h2>
<dd>Price:$6.95</dd>
<dd>Tossed with garlic and herbs. Served with a side of tomato sauce.</dd>
<h3>Extra Sauce</h3>
<dd>Required:0 / Up To:99</dd>
<ol>
<li><dt>Extra Sauce</dt><dd>Price:$0.99</dd></li>
</ol>
<h2>Eggplant Rollatini Appetizer</h2>
<dd>Price:$7.95</dd>
<dd>Fresh rolled eggplant filled with Ricotta and topped with tomato sauce and melted Mozzarella.</dd>
<h3>Extra Sauce</h3>
<dd>Required:0 / Up To:99</dd>
<ol>
<li><dt>Extra Sauce</dt><dd>Price:$0.99</dd></li>
</ol>
<h2>Mozzarella Sticks</h2>
<dd>Price:$6.95</dd>
<dd>Classic Mozzarella sticks served with a side of tomato sauce.</dd>
<h3>Extra Sauce</h3>
<dd>Required:0 / Up To:99</dd>
<ol>
<li><dt>Extra Sauce</dt><dd>Price:$0.99</dd></li>
</ol>
<h2>Buffalo Rock Shrimp</h2>
<dd>Price:$9.75</dd>
<dd>Crispy rock shrimp toasted in our signature buffalo sauce. Served with Blue cheese crumbles.</dd>
<h3>Extra Dressing</h3>
<dd>Required:0 / Up To:99</dd>
<ol>
<li><dt>Extra Dressing</dt><dd>Price:$0.99</dd></li>
</ol>

Here’s my js using jQuery…

$(document).ready(function(){

 $('h2').each(function(i) {
     //to hold the info
     var itemDetail = new Object();
     //h2's contain the name
     itemDetail['name'] = $(this).html();       

     // but dd's contain price description and other
     // and we need to traverse all <dd> tags for each <h2> 
     $(this).siblings('dd').each(function(){             
         var itemInfo = $(this).html();
         var priceLabel = itemInfo.slice(0,7);
         var priceValue = itemInfo.slice(7);
         if (priceLabel='Price:$'){
             itemDetail['price'] = priceValue;
         }else{
             // discard required info (leaving description)
             if (itemInfo.slice(0,9) != 'Required:')
             //descriptions don't have a label 
             itemDetail['description'] = itemInfo;
         }
     });
     console.log(itemDetail)
 }); 
}); 

if i step thru the traversals using alert() on priceLabel and priceValue, the logic echo’s the correct values (specifically priceValue is a numberwhen priceLabel matches the criteria, but when I log the object, i’m not getting info for each iteration of the inner traversal. Instead priceLabel is equal to the .slice() of the final iteration.

Is there a better way to avoid this or use closure to force info into my objects…

Answer 1

A couple of issues:

• The = does assignment but you used it for comparison instead of using == or ===
• You used .siblings('dd') which is giving you all the dd elements, instead of just the next adjacent ones. With your current markup, you can use nextUntil(':not(dd)') instead.

 $('h2').each(function(i) {
     var itemDetail = new Object();
     itemDetail['name'] = $(this).html();       

       // ----v---get next siblings of "h2" until on that is not "dd" is reached
     $(this).nextUntil(':not(dd)').each(function(){             
         var itemInfo = $(this).html();
         var priceLabel = itemInfo.slice(0,7);
         var priceValue = itemInfo.slice(7);

              //--------v----------- use == instead of =
         if (priceLabel == 'Price:$'){
             itemDetail['price'] = priceValue;
         }else{
             if (itemInfo.slice(0,9) != 'Required:')
             itemDetail['description'] = itemInfo;
         }
     });
     console.log(itemDetail)
 }); 

---

EDIT:

If your markup is consistent the way it shows, then you can shorten your code a bit like this:

 $('h2').each(function(i) {
     var itemDetail = new Object();
     itemDetail['name'] = $(this).html();       

     var dds = $(this).nextUntil(":not(dd)");
     itemDetail['price'] = dds.eq(0).html().slice(7);
     itemDetail['description'] = dds.eq(1).html();
     console.log(itemDetail);
 }); 

Or even shorter using an object literal:

 $('h2').each(function(i) {
     var dds = $(this).nextUntil(":not(dd)");
     var itemDetail = {
                name: $(this).html(),
               price: dds.eq(0).html().slice(7),
         description: dds.eq(1).html()
     };
     console.log(itemDetail);
 });