![](/img/trans.png)
[英]unable to wrap dynamically created “p” tag and “img” tag inside a dynamically created “div” tag
[英]Dynamically add object value to div inside <p> tag
单击一个按钮,我想将ap标签添加到现有div中,其中包含对象属性名称的值。
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
}
当用户选中复选框时(这是在他们单击按钮之前)动态创建div。
$('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 + '');
})
这是我正在谈论的div的一个例子
<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>
因此,基本上,单击一个按钮,我希望能够使用该类(即Mango)将其与foodLoads对象中具有相同名称(mango)的属性匹配,将该属性的值放在ap标记中,然后添加它与匹配类(芒果)的div。
这是我试图使用的jQuery。 因为我是jQuery的新手,所以我确信语法都搞砸了。
$('.submit-items').click(function() {
$.each( foodLoads, function( key, value ) {
if ($('.active:contains(' + key + ')')) {
$(this).append('<p>' + key + '</li>');
}
})
})
有任何想法吗? 提前致谢 :)
这是一种更简单的方法。
active
类中查找li
的文本。 p
喜欢:-
$('.submit-items').click(function() {
var type = $('.food-list .active li').text();
var value = foodLoads[type.toLowerCase()];
$('.' + type).append('<p>' + value + '</p>');
});
演示
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.