JS for-loop + if-statement：在有条件地更新文本节点时捕获最后一次出现
JS for-loop + if-statement: Catching last occurrence while conditionally updating text node
我有一个包含多个段落的数组，这些段落将被放置在一个容器中，直到该容器“满”为止。任何不适合这个容器的东西都将放在一个单独的容器中。
我的解决方案大部分工作正常，但我想修复一个轻微的 »cosmetic« 错误。
我的方法是为放置文本的容器声明最大高度（0px 在开头，因为它是空的）。这个最大高度等于包裹容器的元素的高度，它的高度通过 CSS 设置。
然后我通过更新 nodeValue 将内容放入第一个容器内的 text node。在每次迭代之前，都会检查容器的高度，只要它不高于包裹它的父级，就会放置内容。一旦第一个容器»满«（=它的高度等于它的父容器的高度），剩余的内容就会被放入单独的容器中。
我不能简单地放置每个完整的段落，因为如果放在第一个容器中的最后一段足够长以填充多行（当然取决于容器's/parent的宽度），这些线仍然会在第一个容器中结束并被切断。因此，我遍历每个段落的每个单词，每次 nodeValue 更新时检查高度。
这一切都按预期工作，请参阅随附的代码段。
唯一剩下的问题是第一个容器中的最后一行文本只有一个字长。我知道这当然会发生，因为一旦用这个词更新 nodeValue，容器的高度就会被识别为太高而无法容纳更多内容，并且脚本会移动到下一个容器。
有没有办法 »catch« 最后一个词并确保它也被放入第二个容器中？或者正确地填充第一个容器的最后一行，但我认为这更复杂。感谢任何建议。
// Utilities
function update_NodeContent(newContent, container) {
var nodeContent_old = container.childNodes[0].nodeValue;
var nodeContent_add = newContent + " ";
var nodeContent_new = nodeContent_old + nodeContent_add;
container.childNodes[0].nodeValue = nodeContent_new;
}
// Variables
var cellHeight = $("#cell1").height();
// Content
var content = [
"The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex!",
"Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.",
"How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! »Now fax quiz Jack!« my brave ghost pled. Five quacking zephyrs jolt my wax bed.",
"Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox."
]
function placeText() {
while (content.length) {
var node = document.createTextNode("");
$("#cell1 .container").append(node);
//
var content_words = content[0].split(" ");
for (var i = 0; i < content_words.length; i++) {
//
var textBlockHeight = $("#cell1 .container").height();
if (textBlockHeight < cellHeight) {
update_NodeContent(content_words[i], $('#cell1 .container')[0]);
} else {
update_NodeContent(content_words[i], $('#cell2 .container')[0]);
}
}
//
var itemtoRemove = content[0];
content.shift();
}
}
// Execution
placeText();
:root {
--height_line_single: 19px;
--height_textBlock: calc(var(--height_line_single) * 14);
}
body {
font-size: 16px;
line-height: 1.2;
}
p {
margin: 0 0 1rem 0;
}
p.noMargin {
margin: 0;
}
.article {
width: 90vw;
}
.text-block {
height: var(--height_textBlock);
overflow: hidden;
background: lightgreen;
margin-bottom: 1rem;
}
#cell1 {
width: calc(100%/3);
}
#cell2 {
column-count: 3;
column-fill: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
<div id="cell1" class="text-block">
<div class="container">
</div>
</div>
<div id="cell2" class="text-block">
<div class="container">
</div>
</div>
</div>
这是一个工作示例。如果您愿意，可以更改选择器和高度以使用 jQuery 版本。在上面的示例中，您并没有完成对内容的循环，所以我会把它留给您添加。
这个例子也可以在CodePen上查看：https://codepen.io/edlucas/pen/MWYrybK
// Utilities
function update_NodeContent(newContent, container) {
// Ensure that we start with an empty string
var nodeContent_old = container.innerHTML ? container.innerHTML : '';
container.innerHTML = nodeContent_old + newContent + " ";
}
// Content
var content = [
"The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex!",
"Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.",
"How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! »Now fax quiz Jack!« my brave ghost pled. Five quacking zephyrs jolt my wax bed.",
"Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox."
]
var containerHeight = document.querySelector('#cell1').clientHeight;
function placeText() {
if (content.length) {
var content_words = content[0].split(" ");
var holdContent = "";
var useSecondContainer = false;
var $textBlock1 = document.querySelector('#cell1 .container');
var $textBlock2 = document.querySelector('#cell2 .container');
var textBlockHeight = 0;
var word = '';
for (var i = 0; i < content_words.length; i++) {
word = content_words[i];
// Ensure that we have a word to display
if (word && word.trim()) {
textBlockHeight = $textBlock1.clientHeight;
// If we have not already exceeded the first container
if (textBlockHeight <= containerHeight && !useSecondContainer) {
// Add to first container
holdContent = $textBlock1.innerHTML;
update_NodeContent(word, $textBlock1);
// If we exceed the height with this addition, restore the contents to the
// last state and add this word to the second container
if ($textBlock1.clientHeight > containerHeight) {
// Restore last good content
$textBlock1.innerHTML = holdContent;
// Add to the second container
useSecondContainer = true;
update_NodeContent(word, $textBlock2);
}
} else {
// Add to the second container
update_NodeContent(word, $textBlock2);
}
}
}
}
}
// Execution
placeText();
:root {
--height_line_single: 19px;
--height_textBlock: calc(var(--height_line_single) * 2);
}
body {
font-size: 16px;
line-height: 1.2;
}
p {
margin: 0 0 1rem 0;
}
p.noMargin {
margin: 0;
}
.article {
width: 90vw;
}
.text-block {
height: var(--height_textBlock);
overflow: hidden;
background: lightgreen;
margin-bottom: 1rem;
}
#cell1 {
width: calc(100%/3);
}
#cell2 {
column-count: 3;
column-fill: auto;
}
<div class="article">
<div id="cell1" class="text-block">
<div class="container">
</div>
</div>
<div id="cell2" class="text-block">
<div class="container">
</div>
</div>
</div>
我有一个包含多个段落的数组，这些段落将被放置在一个容器中，直到该容器“满”为止。任何不适合这个容器的东西都将放在一个单独的容器中。
我的解决方案大部分工作正常，但我想修复一个轻微的 »cosmetic« 错误。
我的方法是为放置文本的容器声明最大高度（0px 在开头，因为它是空的）。这个最大高度等于包裹容器的元素的高度，它的高度通过 CSS 设置。
然后我通过更新 nodeValue 将内容放入第一个容器内的 text node。在每次迭代之前，都会检查容器的高度，只要它不高于包裹它的父级，就会放置内容。一旦第一个容器»满«（=它的高度等于它的父容器的高度），剩余的内容就会被放入单独的容器中。
我不能简单地放置每个完整的段落，因为如果放在第一个容器中的最后一段足够长以填充多行（当然取决于容器's/parent的宽度），这些线仍然会在第一个容器中结束并被切断。因此，我遍历每个段落的每个单词，每次 nodeValue 更新时检查高度。
这一切都按预期工作，请参阅随附的代码段。
唯一剩下的问题是第一个容器中的最后一行文本只有一个字长。我知道这当然会发生，因为一旦用这个词更新 nodeValue，容器的高度就会被识别为太高而无法容纳更多内容，并且脚本会移动到下一个容器。
有没有办法 »catch« 最后一个词并确保它也被放入第二个容器中？或者正确地填充第一个容器的最后一行，但我认为这更复杂。感谢任何建议。
// Utilities
function update_NodeContent(newContent, container) {
var nodeContent_old = container.childNodes[0].nodeValue;
var nodeContent_add = newContent + " ";
var nodeContent_new = nodeContent_old + nodeContent_add;
container.childNodes[0].nodeValue = nodeContent_new;
}
// Variables
var cellHeight = $("#cell1").height();
// Content
var content = [
"The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex!",
"Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.",
"How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! »Now fax quiz Jack!« my brave ghost pled. Five quacking zephyrs jolt my wax bed.",
"Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox."
]
function placeText() {
while (content.length) {
var node = document.createTextNode("");
$("#cell1 .container").append(node);
//
var content_words = content[0].split(" ");
for (var i = 0; i < content_words.length; i++) {
//
var textBlockHeight = $("#cell1 .container").height();
if (textBlockHeight < cellHeight) {
update_NodeContent(content_words[i], $('#cell1 .container')[0]);
} else {
update_NodeContent(content_words[i], $('#cell2 .container')[0]);
}
}
//
var itemtoRemove = content[0];
content.shift();
}
}
// Execution
placeText();
:root {
--height_line_single: 19px;
--height_textBlock: calc(var(--height_line_single) * 14);
}
body {
font-size: 16px;
line-height: 1.2;
}
p {
margin: 0 0 1rem 0;
}
p.noMargin {
margin: 0;
}
.article {
width: 90vw;
}
.text-block {
height: var(--height_textBlock);
overflow: hidden;
background: lightgreen;
margin-bottom: 1rem;
}
#cell1 {
width: calc(100%/3);
}
#cell2 {
column-count: 3;
column-fill: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
<div id="cell1" class="text-block">
<div class="container">
</div>
</div>
<div id="cell2" class="text-block">
<div class="container">
</div>
</div>
</div>
这是一个工作示例。如果您愿意，可以更改选择器和高度以使用 jQuery 版本。在上面的示例中，您并没有完成对内容的循环，所以我会把它留给您添加。
这个例子也可以在CodePen上查看：https://codepen.io/edlucas/pen/MWYrybK
// Utilities
function update_NodeContent(newContent, container) {
// Ensure that we start with an empty string
var nodeContent_old = container.innerHTML ? container.innerHTML : '';
container.innerHTML = nodeContent_old + newContent + " ";
}
// Content
var content = [
"The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex!",
"Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.",
"How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! »Now fax quiz Jack!« my brave ghost pled. Five quacking zephyrs jolt my wax bed.",
"Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox."
]
var containerHeight = document.querySelector('#cell1').clientHeight;
function placeText() {
if (content.length) {
var content_words = content[0].split(" ");
var holdContent = "";
var useSecondContainer = false;
var $textBlock1 = document.querySelector('#cell1 .container');
var $textBlock2 = document.querySelector('#cell2 .container');
var textBlockHeight = 0;
var word = '';
for (var i = 0; i < content_words.length; i++) {
word = content_words[i];
// Ensure that we have a word to display
if (word && word.trim()) {
textBlockHeight = $textBlock1.clientHeight;
// If we have not already exceeded the first container
if (textBlockHeight <= containerHeight && !useSecondContainer) {
// Add to first container
holdContent = $textBlock1.innerHTML;
update_NodeContent(word, $textBlock1);
// If we exceed the height with this addition, restore the contents to the
// last state and add this word to the second container
if ($textBlock1.clientHeight > containerHeight) {
// Restore last good content
$textBlock1.innerHTML = holdContent;
// Add to the second container
useSecondContainer = true;
update_NodeContent(word, $textBlock2);
}
} else {
// Add to the second container
update_NodeContent(word, $textBlock2);
}
}
}
}
}
// Execution
placeText();
:root {
--height_line_single: 19px;
--height_textBlock: calc(var(--height_line_single) * 2);
}
body {
font-size: 16px;
line-height: 1.2;
}
p {
margin: 0 0 1rem 0;
}
p.noMargin {
margin: 0;
}
.article {
width: 90vw;
}
.text-block {
height: var(--height_textBlock);
overflow: hidden;
background: lightgreen;
margin-bottom: 1rem;
}
#cell1 {
width: calc(100%/3);
}
#cell2 {
column-count: 3;
column-fill: auto;
}
<div class="article">
<div id="cell1" class="text-block">
<div class="container">
</div>
</div>
<div id="cell2" class="text-block">
<div class="container">
</div>
</div>
</div>