如何将.data 属性添加到动态创建的元素

Question

我正在从$.get请求动态创建元素，对于每个创建的元素，我必须从该请求中添加一个带有 object 的数据属性。

所以让我们假设我有以下$.get请求：

    $('.loader').show();
      $.get(api)
        .done(function (data) {

          let plu = [];
          data.map(d => {
            if (d.codplu == "COPERTI" || d.desc == "") return false;

            plu.push('<div class="card card-product" data-toggle="modal" data-target="#modalProduct" data-plu="' + d.id + '">')
            if (d.img) {
              plu.push('<img class="img-fluid" src="data:image/png;base64,' + d.img + '">')
            } else {
              plu.push('<img class="img-fluid d-none" src="">')
            }

            plu.push('<div class="card-body">')
            plu.push('<div class="row">')
            plu.push('<div class="col">')
            plu.push('<h5 class="card-title mb-0">' + d.desc + '</h5>')
            plu.push('</div>')
            plu.push('<div class="col-auto">')
            plu.push('<h5 class="text-right text-success price">' + formatPrezzo(d.prezzo) + '</h5>')
            plu.push('</div>')
            plu.push('</div>')
            plu.push('<p class="card-tag mb-0">')
            d.attributi.map(attr => {
              plu.push('<span class="badge badge-success mr-1" style="background-color: ' + toColor(attr.background) + '; color: ' + toColor(attr.text) + ';">' + attr.desc + '</span>')
            })
            plu.push('</p>')
            plu.push('<p class="card-text text-muted">' + d.estesa + '</p>')
            if (profilo.moduli.ordine_menu && profilo.tavolo != "0") {
              plu.push('<a href="#" class="btn btn-outline-primary btn-block add-cart cd-add-to-cart js-cd-add-to-cart" data-price="' + d.prezzo.toFixed(2) + '">' + AddToCartText() + '</a>') // BUTTON CREATED HERE
            }
            plu.push('</div>')
            plu.push('</div>')
          })
          $('#' + menu + '-tab > .card-columns').append(plu.join(""));
          $('.loader').fadeOut("slow");
        })

对于每个元素中创建的每个按钮，我必须添加一个.data属性，但是如果不再次遍历每个按钮并检查它的 id 以设置正确的.data属性，我怎么能做到呢？

Answer 1

当您使用 jQuery 时，请充分使用它，并使用适当的 jQuery 方法创建所有元素。 这还有一个额外的优势，您可以避免潜在的字符 escaping 问题，并避免打开/关闭标签时出现意外错误。

因此，这里是您的代码如何转换为更多 jQuery 样式的方法。 然后在适当的地方调用.data也是轻而易举的事：

$('.loader').show();
$.get(api).done(function (data) {
    $('#' + menu + '-tab > .card-columns').append(
        data.map(d => d.codplu == "COPERTI" || d.desc == "" ? ""
            : $("<div>", { 
                "class": "card card-product",
                "data-toggle": "modal",
                "data-target": "#modalProduct",
                "data-plu": d.id
            }).append($("<img>", {
                    "class": "img-fluid" + (d.img ? "" : " d-none"),
                    src: d.img ? "data:image/png;base64," + d.img : "",
                }),
                $("<div>").addClass("card-body").append(
                    $("<div>").addClass("row").append(
                        $("<div>").addClass("col").append(
                            $("<h5>").addClass("card-title mb-0").text(d.desc)
                        ),
                        $("<div>").addClass("col-auto").append(
                            $("<h5>").addClass("text-right text-success price").text(formatPrezzo(d.prezzo))
                        )
                    ),
                    $("<p>").addClass("card-tag mb-0").append(
                        d.attributi.map(attr =>
                            $("<span>").addClass("badge badge-success mr-1").css({ 
                                backgroundColor: toColor(attr.background),
                                color: toColor(attr.text)
                            }).text(attr.desc)
                        )
                    ),
                    $("<p>").addClass("card-text text-muted").text(d.estesa),
                    profilo.moduli.ordine_menu && profilo.tavolo != "0" 
                        ? $("<a>", { 
                            href: "#",
                            "class": "btn btn-outline-primary btn-block add-cart cd-add-to-cart js-cd-add-to-cart",
                            "data-price": d.prezzo.toFixed(2)
                        }).text(AddToCartText()).data(d.varianti)
                        : ""
                )
            )
        )
    )
    $('.loader').fadeOut("slow");
});

Answer 2

新添加的元素作为原始 HTML 添加，因此，为了在它们上调用 jQuery 方法，您需要重写代码，以便每个元素都来自一个变量。

另一种方法是从您已经拥有的 jQuery object 开始查找新元素（只要您有可以识别它们的东西）：

 const menu = "foo"; let plu = []; plu.push("<div>One</div>"); plu.push("<div>Two</div>"); $('#' + menu + '-tab >.card-columns').append(plu.join("")).find("div:nth-child(1)").css({color: "green"}).data("data1", "value1").end().find("div:nth-child(2)").css({color: "blue"}).data("data2", "value2").end();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="foo-tab"> <div class="card-columns">Your items here:</div> </div>