jquery appendについて

新しい場所に追加された段落ごとの行数を取得したいのですが、わからないことがあります。

上のソースコードを実行すると、１回目は　2,2,3,2,5,9　とアラートが出るのですが、
２回目以降は 2,2,3,2,6,9 と出ます。
これは毎回ブラウザのキャッシュを消した後の実行でも起こります。

html
1<div><p>"Christmas won't be Christmas without any presents," grumbled Jo, lying on the rug.</p><p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p><p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p><p>"We've got Father and Mother, and each other," said Beth contentedly from her corner.</p><p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly, "We haven't got Father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking of Father far away, where the fighting was.</p><p>Nobody spoke for a minute; then Meg said in an altered tone, "You know the reason Mother proposed not having any presents this Christmas was because it is going to be a hard winter for everyone; and she thinks we ought not to spend money for pleasure, when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't," and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p></div>
2
3<div id="parent"></div>

js
1 let eachPara = $("div:eq(0)").html().split("</p>");
2//let lineHeight = 18;
3
4
5$("div:eq(0) p").each(function(i, val) {
6
7			$("#parent").append($(this).clone());
8
9
10			let eachRowN = $("#parent p:eq(-1)").height() / 18;
11		  
12      
13      alert(eachRowN);
14});

css
1#parent{
2  width:430px;
3  background-color:red;
4}
5#parent p{
6  width:100%;
7  line-height:18px;
8  font-size:17px;
9  hyphens: auto;
10  text-indent: 1em;
11  text-align: justify; /* 両端揃え(均等割り付け) */
12  font-family: "Vesper Libre", serif;
13}

どのようにソースコードを直せばいいでしょうか？
お願い致します。

問題が起こったブラウザはmacのChrome / Safariです。

kei344

2019/01/02 08:04

コードは外部サービスだけでなく、質問文にコードブロックでお書きください。

退会済みユーザー

2019/01/02 08:08

追加致しました。

kei344

2019/01/02 08:13

ブラウザはどれでしょうか。WindowsのFirefox/Chromeで 2,2,3,2,6,9 と出ます。

退会済みユーザー

2019/01/02 08:15 編集

MacのChrome / Safari だと上の問題が起きました。 FireFoxは問題なかったです。

kei344

2019/01/02 08:18

手元に検証環境が無いので私は回答できませんが、環境について質問文に追記しておくことをお勧めします。

退会済みユーザー

2019/01/02 08:24

ありがとうございます。追加しました。

行動規範の内容に同意します

回答1件

どのようにソースコードを直せばいいでしょうか？

そもそも、このコードで一貫した結果を得られることは期待しないほうがいいでしょう。DOMContentLoadedより前に実行を行っていますので、CSSがかかるかからないも、実行タイミングによって違ってしまいます。

投稿2019/01/02 09:28

maisumakun

総合スコア145184

退会済みユーザー

2019/01/02 09:45

何か解決方法はあるでしょうか？

maisumakun

2019/01/02 09:48

$(function(){})で囲んで実行すれば、CSSも読み込み終わった段階で実行されます。ただし、環境ごとにレンダリングは違ってきますので、同じ値をどの環境でも返すことは保証できません。

kei344

2019/01/02 09:52

jsfiddleはOnLoadに書かれていますので、「DOMContentLoadedより前に実行」ではないのでは？

maisumakun

2019/01/02 09:59

あら、そうだったんですね> kei334さん

kei344

2019/01/02 10:02

To: maisumakunさん jsfiddleは「OnLoad」「On DOM Ready」「No wrap - bottom of <head>」「No wrap - bottom of <body>」から選べるようになっていて、質問者さんのjsfiddleはOnLoadになっていましたよー。

退会済みユーザー

2019/01/02 10:06

$(function(){})で囲んでもできませんでした。何か他に行数を取得する方法はあるでしょうか？

行動規範の内容に同意します