<br /> 无法处理新创建的列表项

Question

我有一个由点击事件填充的收藏夹列表。即使功能正常，列表项也没有用换行符分隔：

Guide to Stuff.docxTemplate 1.docxTemplate 2.docxNext

Line.docxThen More.docx

我在 .append() 中加入了 <br/>，但没有用。我之前在 jQuery 中加入了换行符，所以我不确定为什么它现在不起作用。有什么想法吗？

JS 片段：

function faveFunc(evt) {
    var anchor = $($(evt.target).prev().find("a")[0]).clone();
    switch($(".populate-faves").find("a:contains(" + $(anchor).text() + ")").length)
    {
      case 0:
        $(".populate-faves").append(anchor);
        break;
      default:
        $(".populate-faves > a:contains(" + $(anchor).text() + ")").remove();
        break;
    }


  }; // ------------ faveFunc

function newList() {
    let data = $($(evt.target).prev().find("a")[0]).html()
    $(".populate-faves").html("");
    $("#km-table-id tbody tr").each(function(i, el) {
      let fave = $(el).find(".checkbox-class");
      let itemText = $(el).find(data);
      if($(fave).is(":checked")) {
        // $(".populate-faves").append("<li>" + $(itemText).html() + "<br/>");
        $(".populate-faves").append("<li> <br />");
      }
    });
   console.log(newList);
}; // ----- newList()

HTML:

...

<div id="myFave.hs-gc-header" class="faves-div">
     <p style="font-weight:bold">My Favorites:</p>

     <div class="populate-faves"></div> <!-- Where I want the list items to appear -->
</div>

...

---

更新代码：

function newList() {
    let data = $(evt.target).prev().find("a").eq(0).html();
     let outputList = $(".populate-faves .ul-faves");

     $(".populate-faves").html("");

    $("#km-table-id tbody tr").each(function(i, el) {
      let fave = $(".checkbox-class", el);
      let itemText = $(data, el);

      if(fave.prop(":checked")) {
        outputList.append("<li>" + itemText.html() + "</li>" + "<br/>");
        // $(".populate-faves ul").append("<li> <br />");
      }
    });
    // console.log(newList);
  };

HTML:

<div id="myFave.hs-gc-header" class="faves-div">
            <p style="font-weight:bold">My Favorites:</p>

            <div class="populate-faves">
              <ul class="ul-faves"></ul>
            </div>
          </div>

屏幕截图

Answer 1

您需要 <ul> 或 <ol> 才能使用 <li>。 <li> 元素也缺少结束标记。

Answer 2

为代码添加了注释并对其进行了一些清理。为它添加了一个 ul 以将元素附加到。

function newList() {
  let data = $(evt.target).prev().find("a").eq(0).html(); // use eq() to avoid breaking out of the jQuery object
  let outputList = $(".populate-faves .list"); // lookup the output list once
  
  $(".populate-faves").html("");
  
  $("#km-table-id tbody tr").each(function(i, el) {
    // you can use the $(selector, context) version to avoid creating unnecessary jQuery objects
    let fave = $(".checkbox-class", el);
    let itemText = $(data, el);
    
    // if you already have the element, use prop('checked') instead of is(':checked') to access the boolean property on the element
    if(fave.prop("checked")) {
      //append the li to the list, properly closing it
      outputList.append("<li>" + itemText.html() + "</li>");
    }
  });
};

<div id="myFave.hs-gc-header" class="faves-div">
  <p style="font-weight:bold">My Favorites:</p>

  <div class="populate-faves">
    <ul class="list"></ul> <!-- CREATED unorder list FOR OUTPUT -->
  </div>
</div>

<br /> 无法处理新创建的列表项

<br /> not working on newly created list items

html

javascript

jquery

append

line-breaks

JS 片段：

HTML:

---

更新代码：

HTML: