将 html 元素从容器移动到容器

Posted 2023-02-16

【中文标题】将 html 元素从容器移动到容器

【英文标题】：Move html elements from container to container

【发布时间】：2011-04-17 09:17:32

【问题描述】：

我必须将文本分成几部分。文本仅包含 <div id="main"> 内的段落（ p 标签）。我想插入一些 id 为 page1...pagen 的 div，并在其中分配段落。

这是我的代码，但它不能正常工作。 div在段落之前生成，段落内部不会移动。

除了报错，有没有更有效的方法？

    var n = 1;
    $('article').prepend('<div id="pagecnt">&nbsp</div><br/>');

    $('#pagecnt').append('<a href="#'+n+'">'+n+'</a>').after('<div id="page'+n+'" style="display:block;"></div>');

    var pargraph = $('p');
    for (var i = 0; i < pargraph.length; i++)
    

        if ( $(document).height() < 2 * $(window).height() )
        
            $('#page'+n).append(pargraph[i].detach());
         else 
            $('#page'+n).after('<div id="page' + ++n + '" style="display:none;"></div>');
        
    

编辑：这应该是结果（基本上）

【参考方案1】：

我认为这是您所追求的分页，但也许使用 jQuery Columnize or Columnizer 插件会起作用，然后您可以调整以显示/隐藏创建的列。

我玩弄了这个想法，作为一个菜鸟，这是一个很好的练习，我没有使用detach()，而是使用append().. 然后当原来的“主” div 为“空”时，我'扫出'并分离它 - 在我最初的努力之一中，有时孩子们没有移出主 div，我认为是额外的页面**最终解决了这个问题，但我添加了最后扫一扫以防万一。

我会发布我的进展情况，但请记住，它非常笨拙，（可能不是真正的答案，更像是一种思路）并且它可能不是非常优化的代码，所以如果专业读者/我将不胜感激回答者没有投反对票，而是提出了一些关于如何提高思维/编码和智慧的建设性批评

有一些问题，比如点击顶部链接不会为两个计数器着色，而点击底部链接会（它不在小提琴上？），**我必须添加一个额外的溢出 div 以允许不均匀分割（段落或孩子的不同尺寸意味着高度分割不能准确） - 这个额外的 div 在我的测试中从来没有必要，但是 YMMV

由于 CSS 将主 div (.article) 与页面相同

我仍然不明白为什么实际的拆分会拆分成列而不是将它们全部放在第一页（不是抱怨;））-循环为什么/如何知道将其放入 3/4 页 div ?

我的努力：here

【参考方案2】：

我不确定链接，但是对于 div，如果您想将每个段落放在自己的 div 中，可以使用.wrap()：

$('p').wrap(function(i) 
    return '<div id="page'+i+'" style="display:block;" />'
);

如果您发布 html 的前后结构，我们可以提供更多帮助。

【讨论】：

wrap 可以在单个元素中使用，不是吗？我的意图是将几个 p 分组到一个 div 中。

@Bakudan：我明白了。正如我所说，一个例子会很有帮助。它们是如何分布的，你是否有某种模式（比如平均分布）？

@Felix Kling 没有模式。段落包含随机文本。脚本应该移动段落，直到 html 的高度大于 2 卷轴（ 2*$(window).height() ）。

@Bakudan：啊，我想知道这应该如何工作，但现在我看到你设置了display: none。我认为这里的逻辑有点不对劲。你说你想把段落放在 div 中，但必须有一些规则如何放置它们。似乎您一直在生成 div，然后将剩余的段落放在最后生成的 div 中。正如我所说，之前/之后的示例和演示会很好。玩起来更容易。

Ive added a pic, that represents my idea. @Felix Kling Just placing "p" inside the div pointless. "display:none" is important - it doesnt 占用空间并交换 div，不应过多更改页面高度。

【参考方案3】：

我猜这就是你要找的东西：

 var n = 1;
    $('article').prepend('<div id="pagecnt"></div><br/>');

    $('#pagecnt').append('<a href="#'+n+'">'+n+'</a>').after('<div id="page'+ 
       n + '" style="display:block;"></div>');

    $('p').each(function(i)
      if ( $(document).height() < 2 * $(window).height() )
        $('#page'+n).append('<p>' + $(this).html().remove() + '</p>');
      else
        $('#page'+n).after('<div id="page' + (++n) + 
         '" style="display:none;"></div>');
      
    );

【讨论】：

你试过了吗？不起作用。 $(this).html().remove() 会给你一个错误。无论如何，这条线是不必要的复杂，并将删除和存在的事件处理程序。

或者你可以这样做：var pHTML = $(this).html(); $(this).remove();$('#page'+n).append('<p>' + pHTML + '</p>');

或者只是$('#page'+n).append(this)...就像我说的，没必要让它变得复杂。

:) 绝对。但是这家伙想删除原始段落或至少将其分离。

所以？如果你将一个 DOM 元素附加到另一个元素上，它会从原来的位置移除。