我正在编写JQuery脚本来确定固定高度的元素何时被等于更大高度的内容填充，此时我希望它为所有流入的溢出内容创建一个新的相同元素。我希望它在重复时自动执行此操作。
我在大多数时候都有这个问题，但由于我在子元素上运行的“for each”循环，我遇到了问题。
虽然脚本在第一页溢出后有效地创建了一个新页面，并且它成功地将溢出的内容移动到新页面中，但它会为每个新的子节点执行此操作，而不管应该重置内容高度这一事实。我看到它的方式，我需要在循环中提示创建新页面以将当前子元素传递到其中。我尝试使用“return false”来转义循环。这打破了整个剧本。
HTML：
<div id="page-container">
<div class="page">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla ipsum vitae neque fermentum, a sagittis magna lacinia. Nullam eget nibh nulla. Vivamus tellus lectus, ullamcorper sit amet diam eget, placerat gravida enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce condimentum risus sed nunc feugiat maximus. Sed tincidunt nisi velit, et hendrerit dolor suscipit eu. Aenean dui nulla, tempus eu posuere congue, iaculis eu sapien. Phasellus volutpat nisi dui, a malesuada justo posuere vitae. Sed dolor turpis, porta a libero sed, rutrum elementum augue. Proin diam nibh, gravida eget velit nec, tempor consectetur felis.</p>
<p>Aliquam interdum accumsan nisl eget ullamcorper. Morbi id ornare dui. Aliquam euismod efficitur magna ut vestibulum. Sed pellentesque metus vitae quam feugiat, eu ultricies ipsum tristique. Ut in diam quis nulla aliquam dictum. Aenean sapien leo, rutrum quis posuere quis, convallis sit amet nisi. Aenean ac pellentesque metus. Phasellus luctus sapien at massa interdum lacinia. Suspendisse lacus eros, luctus pellentesque diam a, tempor semper nunc. Vestibulum accumsan nec felis vitae finibus. In viverra aliquet est, eu semper tellus. Etiam interdum dignissim euismod. Curabitur iaculis tellus at semper suscipit. Quisque sed risus neque.</p>
<p>Phasellus tincidunt diam id finibus tempor. Pellentesque vel ultrices neque. Suspendisse potenti. Pellentesque eget gravida sapien. Pellentesque malesuada bibendum viverra. Phasellus at ante nec turpis placerat placerat. Pellentesque sed nisl ut eros finibus faucibus. Duis dignissim ut sapien eget faucibus. Mauris sem risus, consequat scelerisque dui quis, consectetur vestibulum nisi. Morbi nisl nisl, lobortis vel risus rhoncus, accumsan scelerisque nisi.</p>
<p>Maecenas odio arcu, aliquet in accumsan id, blandit vitae tortor. Nunc nec aliquet nisl. Nullam tempus turpis dolor, quis vestibulum tortor mollis vel. Sed sed ultrices ex. Curabitur accumsan arcu nec elit molestie tristique in quis lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam varius sapien gravida finibus euismod. Mauris semper consectetur massa, ut sagittis arcu. Mauris suscipit lectus id dolor semper lacinia.</p>
<p>Nunc a arcu diam. Fusce at mauris molestie, tempor nulla sed, mollis odio. Cras commodo nibh a felis aliquet tempor. Donec vitae nisi ut leo tincidunt auctor. Nam eleifend non odio quis rutrum. Curabitur scelerisque orci vel felis accumsan finibus. Vivamus ut hendrerit diam, in blandit metus. Vestibulum mollis odio arcu, ac elementum leo iaculis sit amet. Vestibulum mollis mattis nunc molestie pulvinar. Etiam ante nibh, ullamcorper nec turpis id, pretium euismod nisi. Aliquam scelerisque, metus ac laoreet iaculis, nulla mauris tristique ligula, sed sagittis risus massa quis lectus. Maecenas nec nisl ullamcorper, vehicula dui et, hendrerit risus. Quisque volutpat urna imperdiet lobortis molestie. Quisque at dapibus quam. Etiam neque mi, bibendum sit amet facilisis a, ullamcorper a enim.</p>
<p>Cras quam massa, facilisis ut elementum vel, maximus ut augue. In sem odio, blandit eu urna eget, sollicitudin convallis eros. Praesent eget lorem nec lorem faucibus euismod. Phasellus ullamcorper tristique velit sed facilisis. Etiam et lectus fringilla, tristique urna sit amet, sagittis lacus. Phasellus at erat malesuada, imperdiet nunc vel, tempor mi. Vestibulum vulputate felis sed lectus fermentum dignissim. Quisque dictum posuere tincidunt. In sit amet ante sodales, iaculis ipsum sit amet, dignissim ex. In nec turpis leo. Donec iaculis pulvinar neque nec maximus.</p>
<p>Cras auctor posuere dolor. Quisque venenatis risus sit amet lacus viverra, vitae placerat sem scelerisque. Curabitur id pellentesque lacus. In mi eros, tincidunt nec est id, auctor elementum felis. Aenean varius elementum aliquam. Fusce vehicula ipsum eget enim tincidunt, id maximus felis condimentum. Suspendisse at dignissim enim, vitae viverra sem.</p>
<p>Vivamus vitae mi id mauris varius pretium. Mauris eu nibh nec eros varius placerat. Mauris ut nulla consectetur, egestas ante id, congue leo. Vestibulum sit amet ipsum ligula. Suspendisse sed dui sed ante tempor volutpat. Duis placerat, augue non sagittis ultrices, nibh arcu fringilla dolor, eu vestibulum mi lectus et quam. Sed euismod eget neque ut venenatis. Cras metus sem, malesuada id tristique vitae, aliquet et felis. Vivamus sed elementum tortor, eget cursus mi. Suspendisse dui est, feugiat vulputate velit ac, consectetur viverra mi. Aenean porttitor turpis leo, a convallis lacus tincidunt at. Pellentesque quam nulla, dictum id sem maximus, aliquet maximus lorem.</p>
<p>Mauris ut porttitor purus, a sagittis purus. Cras at mauris nec est aliquam malesuada ut at diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales vestibulum dui vitae eleifend. Proin a lacus id lacus pulvinar aliquet. Donec vel eros sem. Fusce pharetra tincidunt odio ac malesuada. Aliquam pellentesque purus non rhoncus fermentum. Integer ultrices id neque id congue. Quisque mollis non velit quis tincidunt. Pellentesque semper commodo massa, vitae dapibus leo feugiat vel. Duis sit amet dignissim nibh.</p>
<p>Curabitur vitae pharetra mi. Nullam id ligula sed orci cursus suscipit a ut erat. In non fermentum neque. Aenean quis luctus tellus, sit amet accumsan leo. Aenean vel libero rhoncus, cursus nisl non, maximus lorem. Aliquam facilisis leo leo. Maecenas semper nunc arcu, eu blandit ante posuere sed. Phasellus dapibus purus lacus, interdum dapibus est tristique vel. Mauris luctus est a orci ultricies, vel gravida diam porta. Donec fermentum vestibulum bibendum. Quisque pretium maximus sollicitudin. Praesent mollis neque nisl. Praesent dignissim porttitor commodo. Donec non sapien fringilla, iaculis ante sed, consectetur quam. Maecenas condimentum lorem leo, at varius nisi malesuada sit amet. Sed vehicula magna leo, id accumsan ex ultricies eget.</p>
</div>
</div>
CSS：
/* Fonts */
/** Garamond Cormorant (regular, italic, bold and bold italic) **/
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700,700i');
/* General / boilerplate styles */
/** Page **/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { height: 100%; }
html { font-size: 6.25%; }
body { margin: 0; }
/** Typography **/
body { font-family: 'Cormorant Garamond', serif; font-size: 16em /* 16px */; }
h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
h1 { font-size: 4em; } h2 { font-size: 3.5em; } h3 { font-size: 3em; }
h4 { font-size: 2.5em; } h5 { font-size: 2em; } h6 { font-size: 1.5em; }
p { font-size: 1em; line-height: 1.5; }
.paragraph { text-indent: 2em; }
.center { text-align: center; }
.justify { text-align: justify; }
blockquote { margin: 1rem 4em 1rem 4em; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
html[lang="fr"] q { quotes: "\00ab" "\00bb"; }
cite { font-style: normal; }
cite:before { content: "\0020\2014\0020"; }
/** Media **/
figure { margin: 1em; text-align: center; }
@media (min-width: 750px) {
.inline-left { float: left; margin: 1em 1em 1em 0; }
.inline-right { float: right; margin: 1em 0 1em 1em; }
}
figure img { display: inline; max-width: 100%; margin: 0.5em 0; }
.greyscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.sepia { -webkit-filter: grayscale(100%); filter: sepia(100%); }
/* Thematic styles */
body {
padding: 1em;
background: url(https://images.freecreatives.com/wp-content/uploads/2016/02/Download-High-Quality-Wood-Background-Wallpaper-for-Your-Desktop.jpg);
background-repeat: repeat;
}
.page {
width: 600px;
height: 800px;
margin: 0 auto;
margin-bottom: 1em;
padding: 2em;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
background: #F8ECC2;
color: #0c0d0d;
overflow: hidden;
}
JQUERY：
// On document load...
$(document).ready(function() {
// For each page...
$('.page').each(function () {
// Get page height
var pageHeight = $(this).height();
// Initialize content height
var contentHeight = 0;
// For each element of the page...
$(this).children().each(function () {
// Add element height to overall content height
contentHeight += $(this).outerHeight();
// When the content height becomes greater than the page height...
if (contentHeight > pageHeight) {
// Append a new '.page' to the '#page-container'
$(this).parent().after('<div class="page"></div>');
// Append the current, overflowing element to the next page
$(this).appendTo($(this).parent().next($('.page')));
}
});
});
});
如果其中任何一项不清楚，Codepen应该很好地清理它。
答案 0 :(得分：0)
每当你处于循环中时，return false退出
您的代码是正确的，返回false时没有代码可执行，因此没有任何反应。
$.each(array, function(idx, value){
if(condition){
return true; // this will go to the next iteration
}else {
return false; // this will exit the loop
}
});
如果您处于for循环中，请创建条件false或break。
for(i = 0; i < arr.length; i++){
if(condition){
break;
}else {
// do stuff
}
}