Question

我在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>

Answer 1

您应该组合id和类选择器。

$("#"+id_attr_val+".Topping-details").append(toppingcart);

它会找到具有类Topping-details

的ID

Answer 2

你应该使用'.nextAll（）'。

$(this).parent().nextAll('.Topping-details').eq(0).append(toppingcart);

这是做什么的？

$（this）指的是你的'.topp'，它位于带有'.col'类的div中。

我们得到$（this）的父级是div'.col'，我们搜索位于div之后的元素'.Topping-details'。

Answer 3

＆＃34; CSS＆＃34;实际上是HTML。 CSS是不同的，并用于样式。还有一些HTML错误。请更正这些。如下所示;

<div class="Topping-details" id=" '+v_item_id+' "></div>

注意＆＃39; Topping-details＆＃39;。

之后的"

如果您想使用jQuery定位具有特定ID的节点，则可以使用$('#_id_')。其中_id_是您要追加toppingcart

的节点的ID

Answer 4

你可以试试这个：

$("div#"+id_attr_val).each(function(index, element){
      $(element).append(toppingcart);
});

如何根据类名和div id附加数据？

4 个答案: