动态地将对象值添加到div里面 <p> 标签

Question

On click of a button, I want to add ap tag to an existing div with the value of an object property name inside of it.

  var foodLoads = {
    orange: 6.7,
    apple: 5.6,
    banana: 12.7,
    grapes: 16.3,
    peach: 2.7,
    pear: 6.5,
    mango: 16.1,
    blueberries: 9.3,
    grapefruit: 1.7,
    strawberry: 3.5,
    tangerine: 3.1,
    watermelon: 8,
    duck: 0,
    beef: 0,
    chicken: 0,
    ham: 0,
    turkey: 0,
    elk: 0,
    pork: 0,
    fish: 0,
    eggs: 0,
    lamb: 0,
    applejuice: 11.8,
    cranberryjuice: 23.3,
    orangejuice: 14.4,
    carrotjuice: 8.6,
    lemonade: 24.3,
    hotchocolatemix: 10.2,
    tomatojuice: 3.5,
    chocolatemilk: 13.3,
    almondmilk: 0.02,
    soymilk: 4,
    wholewheatbread: 6.1,
    whitebread: 10.7,
    bagel: 30,
    waffle: 13.8,
    pancake: 5.3,
    croissant: 12.2,
    muffin: 28.8,
    englishmuffin: 21.3,
    doughnut: 15.2,
    oatmeal: 12.6,
    quinoa: 20.4,
    wholegrainbread: 7.1 
  }

The divs are created dynamically when a user checks a checkbox (this is before they click the button).

  $('input').on('ifChecked', function(event) {       
    var liText = $(this).parent().parent().text();
    var wrappedUp = $('<div class="active"><li>' + liText + '</li><select class="serving-size"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div>');
    $('.food-list').append(wrappedUp);
    $(wrappedUp).addClass('' + liText + '');        
})

This is an example of the divs I'm talking about

<ul class="food-list">

    <div class="active Mango">
                 <li>Mango</li>
          <select class="serving-size"><option value="1">1</option><optionvalue="2">2</option><option value="3">3</option><option value="4">4</option>
          </select>
    </div>
</ul>

So, basically, on click of a button I want to be able to use the class (ie Mango) to match it with the property in the foodLoads object with the same name (mango), put that property's value in ap tag, and add it to the div with the matching class (Mango).

This is the jQuery I was trying to use. As I am new to jQuery I'm sure the syntax is all screwed up.

  $('.submit-items').click(function() {
    $.each( foodLoads, function( key, value ) {
      if ($('.active:contains(' + key + ')')) {
        $(this).append('<p>' + key + '</li>');
      }
})

     })

Any ideas? Thanks in advance :)

Answer 1

Here is a simpler approach.

• find the text of the li from the active class.
• look up its value.
• append the p

like:-

$('.submit-items').click(function() {
   var type = $('.food-list .active li').text();
   var value = foodLoads[type.toLowerCase()];
   $('.' + type).append('<p>' + value + '</p>');
});

Demo

 var foodLoads = { orange: 6.7, apple: 5.6, banana: 12.7, grapes: 16.3, peach: 2.7, pear: 6.5, mango: 16.1, blueberries: 9.3, grapefruit: 1.7, strawberry: 3.5, tangerine: 3.1, watermelon: 8, duck: 0, beef: 0, chicken: 0, ham: 0, turkey: 0, elk: 0, pork: 0, fish: 0, eggs: 0, lamb: 0, applejuice: 11.8, cranberryjuice: 23.3, orangejuice: 14.4, carrotjuice: 8.6, lemonade: 24.3, hotchocolatemix: 10.2, tomatojuice: 3.5, chocolatemilk: 13.3, almondmilk: 0.02, soymilk: 4, wholewheatbread: 6.1, whitebread: 10.7, bagel: 30, waffle: 13.8, pancake: 5.3, croissant: 12.2, muffin: 28.8, englishmuffin: 21.3, doughnut: 15.2, oatmeal: 12.6, quinoa: 20.4, wholegrainbread: 7.1 }; $('.submit-items').click(function() { var type = $('.food-list .active li').text(); var value = foodLoads[type.toLowerCase()]; $('.' + type).append('<p>' + value + '</p>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="food-list"> <div class="active Mango"> <li>Mango</li> <select class="serving-size"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </div> </ul> <button class="submit-items">submit</button>