1

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

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

除了错误，有没有更有效的方法来做到这一点？

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

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

在此处输入图像描述

4

3 回答 3

1

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

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

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

于 2011-04-17T09:21:20.440 回答
1

我想这就是你要找的：

 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>');
      }
    });
于 2011-04-17T09:27:38.430 回答
1

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

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

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

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

.article由于 CSS 将主 div ( ) 与页面相同，当 JS 关闭时，它会很好地降级

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

我的努力：这里

于 2011-04-19T09:42:59.803 回答