Question

我有两段。首先，我想先将每个单词分开，用带有id的span包装，然后将例如5个第一个单词移动到第二个段落（带空格）。问题是我不知道追加（''）是否是一个好主意，第二个问题是注入跨度后第二段宽度太大（它应该是100px，文本重叠到下一个像第一段中的行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>

Answer 1

这样的东西？

$(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/

请注意，如果要移动元素，则不应克隆它们。

Answer 2

使用$('.p2').append(' ');代替$('.p2').append(' ');

  =不间断的空间

Answer 3

<强> jsBin demo

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

将段落分成跨度

3 个答案: