我在for循环中存在以下CSS。
这下面的css出现在for循环中,所以我使用双引号来生成动态id。
<div class="col"><a href="#" id="'+v_item_id+'" class="btn btn-sm topp ">Topping</a>
<a href="#" id="'+v_item_id+'" class="btn btn-sm crust">Crust</a>
</div>
<div class="price" >25</div>
<div class="col total total_'+random_number+'" id_attr="'+random_number+'">25</div>
</li>
</ul>
</div>
<div class="Topping-details id=" '+v_item_id+' "></div></div></div>
点击Topping Link后,我正在进行如图所示的AJAX调用
$(document).on("click", ".topp", function ()
{
var id_attr_val = $(this).attr("id");
$.ajax({
type: 'GET',
url: 'http://hostip:8080/Snacks/oms/toppings?toppingid=' + id_attr_val,
jsonpCallback: 'jsonCallback',
cache: true,
dataType: 'jsonp',
jsonp: false,
success: function (response) {
var toppingres = response;
var toppingcart = '<img src="images/arrow-topping.png"/><section><i id="topping-close"></i>';
for (var i = 0; i < toppingres[0].toppings.length; i++){
toppingcart += '<a href="#">'+toppingres[0].toppings[i]+'</a>';
}
toppingcart += '</section>';
$("div#"+id_attr_val).append(toppingcart);
},
});
});
当我尝试上述方式时, toppingcart未附加到div类Topping-details
如果使用$('.Topping-details').append(toppingcart)
,则数据被附加到所有元素(因为上面的CSS出现在for循环中)
无论如何我只能定位div id吗?
整个CSS
<div data-role="collapsible">
<div class="prd-items-detials">
<ul>
<li class="head">
<form>
<input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="' + random_number + '" data-mini="true" id_attr="' + random_number + '">
<label class="testtt" for="checkbox-mini-0">' + responseinner[i].name + '</label>
</form>
</li>
<li class="prd-items-qt">
<div class="col"><span class="prd-sm-img"><img id="imagesd" type="img" height="40" width="40" src="' + imgsrc + responseinner[i].image + '"/><span></div><div class="col"><i class="minus" id_attr="' + random_number + '"></i><i class="qt qt_' + random_number + '" id_attr="' + random_number + '">1</i><i class="plus" id_attr="' + random_number + '"></i></div><div class="col"><a href="#" style="display:' + dis_top_val + '" id="' + v_item_id + '" class="btn btn-sm topp ">Topping</a><a id="' + v_item_id + '" href="#" style="display:' + dis_crust_val + '" class="btn btn-sm crust">Crust</a></div><div class="price" style="display:none;">' + responseinner[i].price + '</div><div class="col total total_' + random_number + '" id_attr="' + random_number + '">' + responseinner[i].price + '</div></li></ul></div><div class="Topping-details" id="' + v_item_id + '"></div></div></div>
答案 0 :(得分:1)
您应该组合id和类选择器。
$("#"+id_attr_val+".Topping-details").append(toppingcart);
它会找到具有类Topping-details
答案 1 :(得分:0)
你应该使用'.nextAll()'。
$(this).parent().nextAll('.Topping-details').eq(0).append(toppingcart);
这是做什么的?
$(this)指的是你的'.topp',它位于带有'.col'类的div中。
我们得到$(this)的父级是div'.col',我们搜索位于div之后的元素'.Topping-details'。
答案 2 :(得分:0)
<div class="Topping-details" id=" '+v_item_id+' "></div>
注意&#39; Topping-details&#39;。
之后的"
如果您想使用jQuery定位具有特定ID的节点,则可以使用$('#_id_')
。其中_id_
是您要追加toppingcart
答案 3 :(得分:0)
你可以试试这个:
$("div#"+id_attr_val).each(function(index, element){
$(element).append(toppingcart);
});