1

我有两段。首先，我想先将每个单词分开，用带有 id 的 span 包装它，然后将例如 5 个第一个单词移动到第二段（带空格）。问题是我不知道 append(' ') 是否是个好主意，第二个问题是在将 span 注入到第二段之后，它的宽度太大（应该是 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>
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

使用$('.p2').append(' ');而不是$('.p2').append('&nbsp;');

&nbsp;= 非中断空间

于 2012-09-25T23:48:45.940 回答
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 回答