0

我正在尝试将文本块自动转换为列，因为客户端没有很好地使用 html / CSS。

我编写了这个小脚本来搜索一个 div 以找到一个 hr 标签并自动将一个类添加到 p 标签。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if($('#data').find('hr')){
            $('hr').prev('p').addClass('left');
            $('hr').next('p').addClass('right');
        }
    });
</script>

</head>
<body>



<div id="data">

<p>This is paragraph 1. Lorem ipsum ... <br /><br />
This is paragraph 2. Lorem ipsum ... <br /><br />
This is paragraph 3. Lorem ipsum ... </p>
<hr />

<p>This is paragraph 4. Lorem ipsum ... <br /><br />
This is paragraph 5. Lorem ipsum ... <br /><br />
This is paragraph 6. Lorem ipsum ... </p>

</div>

但是，如果段落的长度不同，则此方法效果不佳，因为右列可能比左列大。

所以我需要重写它以计算字符并将其平均分割（或与左侧较大的部分尽可能接近。）但我不知道如何开始。因此，如果您能提供帮助，那就太好了。

4

2 回答 2

0

鉴于您在正文中有段落标签，这应该可以在没有太多修改的情况下工作。无论您有多少段落，无论文本内容如何在它们之间传播，它都应该起作用。

/**
 * Create left and right divs
 */
var $left = $(document.createElement("div")).addClass('left');
var $right = $(document.createElement("div")).addClass('right');

/**
 * Store the text lengths into an array
 */
var textLengthArray = [];
var totalLength = 0;
$('p').each(function(){
    var $this = $(this);
    var text = $this.text();
    textLengthArray[textLengthArray.length] = text.length;
    totalLength += text.length;
});

/**
 * The midpoint is crucial
 */
var midpoint = totalLength / 2;

/**
 * pastParagraphs - is the text length of the paragraphs we've already moved
 * currentParagraphPos - keeps track of where we are
 * split - we only want to split one paragraph in two
 */
var pastParagraphs = 0            
var currentParagraphPos = 0;
var split = false;

/**
 * iterate over the textLengthArray (i.e. the paragraphs)
 * add them to the left until the text length would of all the paragraphs we've moved
 * into the left would exceed the midpoint. Then split the paragraph the midpoint falls into
 * from there on move paragraphs to the right div.
 */
for (i in textLengthArray) {                
    /**
     * This is the check to insure we aren't past the midpoint
     */
    if (pastParagraphs + textLengthArray[currentParagraphPos] < midpoint) {                    
        /**
         * Move the first paragraph to the left div. 
         * We always move the first because they filter down as we remove them.
         */
        $left.append($('p').eq(0));
        pastParagraphs += textLengthArray[currentParagraphPos];
        currentParagraphPos++;
    }
    else {                    
        /**
         * if we haven't split a paragraph already we should split this first paragraph going right in two.
         */
        if (!split) {
            split = true;

            /**
             * Create two new paragraphs, one for the left, one for the right
             */
            var $goLeft = $(document.createElement("p"));
            var $goRight = $(document.createElement("p"));

            /**
             * The split shouldn't fall in the middle of a word
             * so we run a while loop to find the next available space.
             */
            var splitIndex = midpoint - pastParagraphs;
            var splitPHtml = $('p').eq(0).html();
            while (splitPHtml.charAt(splitIndex) != ' ') {
                splitIndex++;
            }

            /**
             * As we've created two new paragraphs we need to manually remove this one
             */
            $('p').eq(0).remove();

            /**
             * Add the ontent to our new paragraphs and append them to the left and right divs
             */
            $goLeft.html(splitPHtml.substring(0, splitIndex));
            $goRight.html(splitPHtml.substring(splitIndex, splitPHtml.length));
            $left.append($goLeft);
            $right.append($goRight);
        }
        else {                        
            /**
             * Add any further paragraphs to the right div
             */
            $right.append($('p').eq(0));
            currentParagraphPos++;
        }
    }
}

/**
 * Finally we want to append our divs to the body.
 */
$('body').append($left);
$('body').append($right);
于 2012-07-24T16:49:48.077 回答
0

首先，这不应该通过 JavaScript/jQuery 渲染到客户端来完成，你不应该构建布局，尽管 JavaScript/jQuery 只会改进它，

但至于你的代码，你可以这样做。

http://jsfiddle.net/barkermn01/VTQeC/10/

然后，您可以将 splitChar 更改为 a"."如果您希望它在句子中中断，或者" "如果您对单词感到高兴则将其保持打开状态

于 2012-07-24T16:14:37.313 回答