在我的 HTML 中沒有任何硬編碼的情況下，我能做些什么來修復我的 jQuery？

Question

當我檢查我的工作時，我看到我的工作中未定義。 它不應該在那里。 任何人都可以幫忙嗎？

jQuery

    $(document).ready(function () {
    var listItems = $("#productList li");
    listItems.each(function (idx, li) {
        var product = $(li);
        product.append(" - <b> ("+product.attr('data-type')+") </b>");
    });
  });

HTML

                    <ul id="productList">
                    <li data-activity-type="family">Snow Tubbing</li>
                    <li data-activity-type="family">Snowcat Mountain Tour</li>
                    <li data-activity-type="adventure">SnowSlam 11 Racing Course</li>
                    <li data-activity-type="adventure">Snowboarding</li>
                    <li data-activity-type="adventure">Edge 11 Performance Ski Racing</li>
                    <li data-activity-type="family">Dog Sled Tour</li>
                    <li data-activity-type="family">Snowshoeing</li>
                    <li data-activity-type="kids">Kid's Night Out</li>
                    <li data-activity-type="kids">Bear Cub Kamp at the Nursery</li>
              </ul>

Answer 1

我假設activity-type值將附加到innerHTML。 data-type應該是data-activity-type 。

 $(document).ready(function () {
    var listItems = $("#productList li");
    listItems.each((index, item) => {
      item = $(item);
      item.html( item.html() + `- <b>${ item.attr('data-activity-type') }</b>` );
    });
  });