0

我有一段：

<p>red orange yellow green blue indigo violet</p>

我需要将结束文本包装在可以在单击时隐藏/显示的内容中，如下所示：

<p>red orange yellow green 
  <a href="#">...Show More</a>
  <span="unhideme">blue indigo violet</span>
</p>

这是我已经走了多远：

<p>red orange yellow green 
  <a href="#">...Show More</a> 
  blue indigo violet
</p>

有没有办法用jquery说“选择a标签之后的所有文本并将其包装在一个跨度中”？或者使用 jquery 生成“阅读更多”按钮的其他解决方案？

4

2 回答 2

1

只需解析 p 标签的 HTML。首先获取所有内容，然后将其分解，然后在再次使其成为 HTML 之前附加 a 和 span 标签。

var allText = $("p").html();
var firstHalf = allText.substring(0,INDEX AT WHICH YOU WOULD LIKE TO STOP);
var secondHalf = allText.substring(INDEX AT WHICH YOU WOULD LIKE TO STOP+1);
var newHTML = firstHalf + '<a href="#">...Show More</a><span class="unhideme">' + secondhalf + "</span>";

$("p").html(newHTML);
于 2013-11-11T20:58:38.187 回答
0

这可能是一个开始：

$('p').each(function () {
    var $p = $(this);
    var words = $p.html().split(' ');
    $p.html('');

    for (var i = 0; i < 3; i++) {
        $p.append(words[i] + ' ');
    }

    if (words.length > 3) {
        var htmlStr = '<a href="#">...Show More</a><span class="unhideme">';
        for (var i = 3; i < words.length; i++) {
            htmlStr += words[i] + ' ';
        }
        htmlStr += '</span>';

        $p.append(htmlStr);
    }
}); 

$('p').on('click', 'a', function () {
     $(this).hide().next().show();
});

这3是硬编码的，所以你可能想改变它。它基本上表示您要显示多少项目。

或者

如果您希望插件为您完成所有繁琐的工作，请查看trunk8 for jquery。

于 2013-11-11T20:58:07.767 回答