我有一个由点击事件填充的收藏夹列表。即使该功能正常运行,列表项也不会被换行符分隔:
Stuff.docxTemplate 1.docxTemplate 2.docxNext指南
Line.docx然后是更多.docx
我在<br/>
中加入了.append()
,但是没有用。我之前在jQuery中加入了换行符,所以我不确定为什么它现在不起作用。有什么想法吗?
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()
...
<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);
};
<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>
屏幕截图
答案 0 :(得分:2)
您需要<ul>
或<ol>
才能使用<li>
。
此外,<li>
元素缺少结束标记。
答案 1 :(得分: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>