Ausbrechen für jede Schleife JQuery

Question

Ich schreibe JQuery-Skript, um zu bestimmen, wenn ein Element mit fester Höhe gefüllt wird durch Inhalt größer Höhe, an dem Punkt möchte ich ein neues identisches Element für den gesamten überlaufenden Inhalt zu erstellen hineinfließen. Ich möchte es automatisch bei Wiederholung machen.

Ich habe dies zum größten Teil, aber ich habe ein Problem wegen der "für jeden" Schleife, die ich auf den Kind-Elementen ausgeführt habe.

Während das Skript effektiv eine neue Seite erstellt, sobald die erste Seite übergelaufen ist und den übergelaufenen Inhalt erfolgreich in die neue Seite verschiebt, tut dies dies für jedes neue Kind, ungeachtet der Tatsache, dass die Inhaltshöhe zurückgesetzt werden sollte . So wie ich es sehe, muss ich die Erstellung der neuen Seite in der Schleife veranlassen, um das aktuelle untergeordnete Element dorthin zu übertragen. Ich habe versucht, die Schleife mit einem "Return false" zu umgehen. Das bricht das gesamte Skript.

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'))); 
     } 
    }); 
    }); 
}); 

Wenn irgendetwas davon unklar ist, die Codepen sollte es schön klären.

https://codepen.io/christophercostello/pen/yXPBaN

Answer 1

Jedes Mal, wenn Sie in einer Schleife sind, return false es beenden

Ihr Code korrekt ist, gibt es keinen Code auszuführen, wenn falsche Rückkehr, so passiert nichts.

$.each(array, function(idx, value){ 
    if(condition){ 
     return true; // this will go to the next iteration 
    }else { 
     return false; // this will exit the loop 
    } 
}); 

Wenn Sie in einer for-Schleife sind, machen die Bedingung false oder break.

for(i = 0; i < arr.length; i++){ 
    if(condition){ 
     break; 
    }else { 
     // do stuff 
    } 
}