1

2 つの段落があります。まず、最初に各単語を区切り、id のスパンでラップしてから、たとえば最初の 5 つの単語を 2 番目の段落 (スペースを含む) に移動します。問題は、append(' ') が良いアイデアかどうかわからないことです。2 番目の問題は、スパンを 2 番目の段落幅に注入した後、大きすぎることです (テキストが次の段落に重なるように 100 ピクセルにする必要があります)。最初の段落のような行 juz

ここに私の試みがあります

    <body>
<script type="text/javascript">
    $(function(){
        var obj = $('.p1')
        var text = obj.html().split(' '), len = text.length, result = [];
                for( var i = 0; i < len; i++ ) {
                    result[i] = '<span id="'+i+'">' + text[i] + '</span>';
                }
                obj.html(result.join(' '));

            var words = $('.p1').find('span');
            for(var i = 0; i < 5; i++){
                $('.p2').append($(words[i]).clone());
                $('.p2').append('&nbsp;');
            }
    });
</script>

<div class="test" style="width:100px">
<p class="p1">
test1 test2 test3 test4 test5 test6 test7 test8
</p>
</div>
<div class="test" style="width:100px">
<p class="p2">
</p>
</div>
</body>
4

3 に答える 3

2

このようなもの？

$(function() {
    var txt = $('.p1').text().split(' ')
        len = txt.length,
        result = [];
    for (var i = 0; i < len; i++) {
        result[i] = '<span id="' + i + '">' + txt[i] + '</span>';
    }
    $('.p1').html(result.join(' '));
    $('.p1 span:gt(0)').appendTo('.p2');
});​

http://jsfiddle.net/ULmVt/

要素を移動する場合は、複製しないでください。

于 2012-09-25T23:46:53.640 に答える
1

jsBin デモ

   var obj = $('.p1'),
       text = obj.html().split(' '),
       len = text.length,
       result = [];

   for( i=0; i<len; i++ ) {
        result[i] = '<span id="'+i+'">' + text[i] + '</span>';
   }
   obj.html(result.join(' '));

  $('.p1 span:lt(5)').clone().appendTo('.p2').after(' ');
于 2012-09-25T23:50:55.740 に答える
1

$('.p2').append(' ');の代わりに使用$('.p2').append('&nbsp;');

&nbsp;= 改行なしスペース

于 2012-09-25T23:48:45.940 に答える