Question

首次执行下面的代码（在jsfiddle上）时，它会依次警告2,2,3,2,5,9。但是，第一个执行之后的执行总是显示2,2,3,2,6,9。（5-> 6）

从jsfiddle上红色div的第五段可以看到，正确的值为6。

（这发生在Mac上的chrome / Safari中）

我认为问题在于它不是在等待附加元素的DOM构建。

感谢您的帮助。

$(function(){
    let eachPara = $("div:eq(0)").html().split("</p>");
    let lineHeight = 18;


    $("div:eq(0) p").each(function(i, val) {


        $("#parent").append($(this).clone());


        let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;


        alert(eachRowN);
  });

});

完整代码： https://jsfiddle.net/fptd4xkh/1/

$(function() {
  let eachPara = $("div:eq(0)").html().split("</p>");
  let lineHeight = 18;
  $("div:eq(0) p").each(function(i, val) {
    $("#parent").append($(this).clone());
    let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
    console.log(Math.round(eachRowN));
  });
});

#parent {
  width: 430px;
  background-color: red;
}

#parent p {
  width: 100%;
  line-height: 18px;
  font-size: 17px;
  hyphens: auto;
  text-indent: 1em;
  text-align: justify;
  /* 両端揃え(均等割り付け) */
  font-family: "Vesper Libre", serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<div id="parent"></div>

Answer 1

您计算出的位置没有正确的字体。请尝试以下操作。

更改：

#parent {
    width: 430px;
    background-color: red;
}

#parent p {
    width: 100%;
    line-height: 18px;
    font-size: 17px;
    hyphens: auto;
    text-indent: 1em;
    text-align: justify;
    font-family: "Vesper Libre", serif;
}

进入：

div {
    font-family: "Vesper Libre", serif;
}

#parent {
    width: 430px;
    background-color: red;
}

#parent p {
    width: 100%;
    line-height: 18px;
    font-size: 17px;
    hyphens: auto;
    text-indent: 1em;
    text-align: justify;
}

获取已添加段落的行数

1 个答案: