Question

我有一个HTML限制为最大字符数的元素，然后我添加了一个“Read more”链接，用于扩展隐藏内容。

元素的内容包含需要切片的动态HTML;主要是<p>，<ul>/<ol>和<a>标记。

当最大字符数落在<a>标记上时，我尝试的第一个解决方案似乎失败了：

var $element = $(".element");
var elementHTML = $element.html();
var maxCharCount = 250;

$element.prepend("<div class='new-preview-text'>"+
    elementHTML.slice(0, maxCharCount) + 
    "...<br>" +
    "<a class='introtext-collapse-link introtext-see-more'><span class='collapse-arrow collapse-arrow-down'></span>Read More</a>"+
    "</div>"
    );

当maxCharCount在<p>或<ul>/<ol>，内切片但在切片<a>标签时，只有div.new-preview-text被预先添加时，此工作正常;遗漏标记和新的“阅读更多”链接被遗漏。

仅预先添加div元素，然后附加break标记/ new Read more链接：

$element.prepend("<div class='new-preview-text'>"+
    elementHTML.slice(0, maxCharCount));

$element.find(".new-preview-text").children().last().append("...<br>");
$element.find(".new-preview-text").append("<a class='introtext-collapse-link introtext-see-more'><span class='collapse-arrow collapse-
    arrow-down'></span>Read more</a>");

但我不明白为什么。任何人都可以在第一个解决方案中看到错误吗？

jQuery - 为什么预先挂起切片的锚标签不起作用

0 个答案: