添加內容使用jQuery

我演示在JS小提琴https://jsfiddle.net/dineshkanivu/5fp2sjgb/2/添加內容使用jQuery

我想在第4行動態添加內容到id="myNote"。點擊按鈕行，你可以看到總的行數。我想在第4行之後添加一些html內容。我怎樣才能做到這一點使用jQuery

段：

$(function() { 
 
    $("#getLines").click(function() { 
 

 
    var myheight = $("#myNote").height(); 
 
    parseFloat($("#myNote").css("line-height")); 
 
    //$('#myNote').after('<button>button</button>'); 
 
    alert(myheight); 
 

 
    }); 
 
});

#myNote { 
 
    width: 300px; 
 
    line-height: 1; 
 
    height: auto; 
 
    text-align: justify; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myNote"> 
 
    Finally, designing the last sentence in this way has the added benefit of seamlessly moving the reader to the first paragraph of the body of the paper. In this way we can see that the basic introduction does not need to be much more than three or four 
 
    sentences in length. If yours is much longer you might want to consider editing it down a bit! Here, by way of example, is an introductory paragraph to an essay in response to the following question: 
 
</div> 
 

 
<button id="getLines">lines</button>

來源

2016-05-13 Dinesh Kanivu

這將是令人難以置信* *難以實現。您需要以某種方式計算第5行的第一個字符，然後插入之前所需的內容。 –

作爲與@RoryMcCrossan相關的備忘錄，您需要自己嘗試一下，當您遇到特定問題時，請向我們提供一個重現問題的實例。祝你好運。 –

我覺得這個片段有點不對，它顯示的是156行？當你計算行數時，它只有10 – guradio

根據這一post我寫了一個小功能來做到這一點。當然有一個更有效的方法。但它工作正常。

我將自己的每個單詞都包裹在自己的範圍內。之後，我檢查所有跨度的位置，獲取行號，並將該行號添加到跨度。

function insertTextAtLine(target,lineNumber,textInsert){ 

var words = target.text().split(' '); 
var text = ''; 
$.each(words, function(i, w){ 
       if($.trim(w)) text = text + '<span>' + w + '</span> '; 
}); 

target.html(text); 
var line = 0; 
var prevTop = - parseFloat($("#myNote").css("line-height")); 
$('span', target).each(function(){ 
    var word = $(this); 
    var top = word.offset().top; 
    if(top != prevTop){ 
    prevTop = top; 
    line++; 
    } 
    word.attr('class', 'line' + line); 

}); 
var insert=$('<span />').text(textInsert); 
target.find('.line'+lineNumber).first().prepend(insert); 
};

小提琴：https://jsfiddle.net/tye3czva/4/

來源

2016-05-13 08:57:38

非常感謝親愛的.................... .............. –

如果您有任何其他答案，歡迎!!!!! –

添加內容使用jQuery

回答

相關問題