如何在ap的特定行上放置div？

Question

我有一個充滿文字的<p>標簽。 呈現到頁面時，它以5行顯示。 我想設置<div>標簽的樣式和位置以突出顯示給定的行，而無需觸摸<p>標簽或其內容，最好使用jQuery。

所以標記看起來像

<p>one fish two fish red fish zoo fish fifth fish</p>

渲染后的樣子

一條魚
兩條魚
紅魚
動物園魚
第五條魚

我想在 “紅色魚” 第3行的頂部放置一個透明的紅色div。

我什么也沒嘗試，我全都沒主意。

為了回答Matt Burland的問題：我要創建一個函數，該函數在給定元素P和行號的情況下，在渲染的該行上放置一個彩色框。

p可以呈現為任意數量的行。

窗口大小是固定的，因此我不必擔心這件事。

其他功能取決於頁面的DOM。 我可以插入div標簽，但不能插入其他標簽。

Answer 1

演示

JS

$p = $('p').first();
$pHeight = $p.height()/5;
$pTop = $p.offset().top+(2*$pHeight);
$p.after('<div id="IvetriednothingandImalloutofideas" style="height:'+$pHeight+'px;top:'+$pTop+'px">');

的CSS

p {
    outline:1px solid #ccc;
    width:60px; 
}

#IvetriednothingandImalloutofideas {
    background-color:rgba(255,0,0,0.2);
    width:60px;
    position:absolute;
}

Answer 2

這樣做是一個非常糟糕的主意。 正如其他人所說，列表元素是執行此操作的正確方法。 但是，如果需要保持P不變，則可以設置行高，並進行數學運算以將div放置為所需的任意值作為覆蓋。

CSS：

line-height: 22px;

JS：

var pHeight = $('p').height();
var lineHeight = parseInt($('p').css('line-height'));
var selectedLine = 3;
$('#overlay').css('top', -Math.abs(selectedLine * lineHeight));

參見小提琴： http : //jsfiddle.net/JVxdJ/

Answer 3

如果您不想依賴格式（行位置可能會改變等）， 並且不想更改原始<P> ，則可以對其進行克隆-高亮顯示所需文本，並將克隆的文本疊加在原始文本的上方：

的HTML

<p id="text">one fish two fish red fish zoo fish fifth fish</p>

的CSS

#text {
    width:50px;
}

.highlight {
    background-color:red    
}

JS

var $text = $('#text');
var match = "red fish";

var $newtext = $text.clone().html($text.html().replace(match, '<span class="highlight">' + match + '</span>'))

$newtext.appendTo('body').offset($text.offset())

演示： http ： //jsfiddle.net/j4UfM/1/

您可以根據需要刪除突出顯示的副本。