Question

我希望在包含在div中的段落的最后一行创建动画效果。它有一些链接，所以看起来有点像这样：

:manage

因此，在页面加载时最后一次换行发生的地方，我想选择带有跨度的最后一行来为它提供效果。

我希望不必使用jQuery，即使我可能需要......

Answer 1

尝试将.textContent String.prototype.split()与RegExp /\n/，Array.prototype.slice()与参数-1一起使用，以选择最后一个新行字符{{1}使用具有所选文本的String.prototype.replace()元素替换div中的选定文本

＆＃13;

span

＆＃13;

var div = document.getElementById("wrapper");
var text = div.childNodes[0].childNodes[0].textContent.split(/\n/).slice(-1)[0];
div.innerHTML = div.innerHTML.replace(new RegExp("("+text+")"), "<span>$1</span>")

＆＃13;

div {
  white-space:pre;
}

div span {
  font-size:18px;
  color: purple;
}

＆＃13;

Answer 2

当你标记jquery时..这是一个jquery代码..但一定要先包含jquery

var parText = $('#wrapper p').text(); // get text of p
var parSplit = parText.split("\n"); // split text by \n
var lastLine = parSplit[parSplit.length-1]; // get last line
parText.replace(lastLine , ''); // replace last line with nothing
$('#wrapper p').append('<span>'+lastLine+'</span>'); // append the last line with `<span>lastline</span>` and give it a style you need

DEMO

另一个带有slideDown效果的DEMO

使用Javascript选择段落的最后一行

2 个答案: