CODEWITHSUNDEEP
jqueryhtml
Jarritos
Jarritos

Reputation: 55

Jquery dd selecting

If I have the bellow code, is it possible to select 1st, 2nd and 3rd dd separately. For instance if I wanted to change the sub price to 30, the shipping to 10 and the total to 40, how would I select each dd separately in jquery? I know I could just add classes and do via that, I was just wondering if there is another way of doing it.

<dl class="cart">
  <dt>Sub-Total:</dt>
    <dd>10.00</dd>
  <dt>Shipping</dt>
    <dd>5.00</dd>
  <dt>Total:</dt>
    <dd>15.00</dd>
</dl>

Also how would I add in jquery

  <dt>Discount</dt>
    <dd>-5.00</dd>

Right above the Total dt

Upvotes: 1

Views: 2017

Answers (3)

adeneo
adeneo

Reputation: 318302

var newDD = '<dt>Discount</dt><dd>-5.00</dd>';

$('dd', '.cart').eq(0).text(30);
$('dd', '.cart').eq(1).text(10);    
$('dd', '.cart').eq(2).text(40);    

$('dt', '.cart').last().before(newDD);

FIDDLE

Upvotes: 2

Rick Su
Rick Su

Reputation: 16440

http://jsfiddle.net/Neverever/37hSb/

// Update Price
var updatedPrice = [10, 30, 40]

$("dl.cart > dd").each(function(idx, elm) {
   $(elm).text(updatedPrice[idx]);
});

// Insert Discount
$("<dt>Discount</dt><dd>-5.00</dd>")
   .insertBefore("dl.cart > dt:last");​

Upvotes: 0

sachleen
sachleen

Reputation: 31141

The selector returns an array of matched elements. Just use an index to get the one you want.

$("dd")[0] gives you the first one.

Alternatively, you can use the nth-child selector

$("dl dd:nth-child(1)")

Upvotes: 1

Related Questions