使用jquery基于div的高度创建标记部分
使用jquery基于div的高度创建标记部分
提问于 2021-08-18 08:24:37
我有多个带有类.row的div，我想要复制所有这些div在不同的节中的高度，每个节的最大高度应该是1100px，我想复制不同节中的所有div，如果节的高度达到1100像素，那么应该创建新的节，请参见下面的示例：
<div class="row row1">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row2">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row3">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row4">
<p>some html tables and paragraphs here </p>
</div>在上面的例子中，首先我应该得到所有div的高度，然后我应该使用jQuery进行计算并创建截面。假设.row1的高度为700px，.row2为900px，.row3为300px，.row4为100px。
因此，生成的部分应该如下所示
<section>
<div class="row row1">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row3">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row4">
<p>some html tables and paragraphs here </p>
</div>
</section>
<section>
<div class="row row2">
<p>some html tables and paragraphs here </p>
</div>
</section> 每个部分的高度不应超过1100px。我想在单独的法律页上打印1100px的每个部分，我不想有超过1100px的部分。
如果有人能实现这个逻辑，我将不胜感激。
回答 1
Stack Overflow用户
发布于 2021-08-18 22:20:34
请考虑以下内容。
$(function() {
function makeSection() {
return $("<section>").insertAfter($("section:last"));
}
function checkHeight(a, b, h) {
if (h == undefined) {
h = 1100;
}
var r = a + b;
return r > h;
}
$("section:first .row").each(function(i, el) {
var t = $("section:first .row").length;
if (i < t) {
if (checkHeight($(el).height(), $(el).next().height())) {
var nextSection = makeSection();
nextSection.append($(el).next().detach());
}
}
});
});section {
border: 1px solid #999;
padding: 3px;
}
section .row {
border: 1px solid #ccc;
}<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<section>
<div class="row row1" style="height: 700px;">
<p>Item 1</p>
</div>
<div class="row row2" style="height: 900px;">
<p>Item 2</p>
</div>
<div class="row row3" style="height: 300px;">
<p>Item 3</p>
</div>
<div class="row row4" style="height: 100px;">
<p>Item 4</p>
</div>
</section>
在这里你可以看到我们有一些更小的助手函数。checkHeight将计算合并后的高度值。如果它们小于阈值h (默认为1100)，则返回false。如果大于阈值，则返回true。
然后，您可以迭代每一行，并从每一行获得height。1& 2、2& 3、3& 4。如果太高，则将第二部分移动到新部分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68828908
复制相关文章
相似问题
腾讯云开发者
