將段落分解爲跨度

我有兩個段落。首先，我想首先將每個單詞分開，然後用span與id包裝，然後將例如5個第一個單詞移動到第二個段落（包含空格）中。問題是我不知道append（' '）是否是一個好主意，第二個問題是跨度到第二段的寬度過大（它應該是100px，文本重疊到下一行像一卷在第一段將段落分解爲跨度

，這裏是我的嘗試

<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>

來源

2012-09-25 gruber

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

  =不可斷裂空間

來源

2012-09-25 23:48:45 Reflective

：d IM所以笨 – gruber

像這樣的事情？

$(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-25 23:46:53 undefined

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

來源

2012-09-25 23:50:55

將段落分解爲跨度

回答

相關問題