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

JavaScript/jQuery をクライアントにレンダリングする際にこれを行うべきではありませんが、JavaScript/jQuery はそれを改善するだけですが、レイアウトを構築するべきではありません。

しかし、あなたのコードに関しては、これを行うことができます。

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

"."次に、splitChar を文で分割したい場合は、splitChar を a に変更でき" "ます。単語が壊れた場合はそのままにしておくことができます。

于 2012-07-24T16:14:37.313 に答える
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 に答える