2012-09-25 2 views
1

두 단락이 있습니다. 먼저 각 단어를 분리하고 id로 스팬으로 감싸고 예제 5의 첫 단어를 두 번째 단락으로 공백으로 옮깁니다. 문제는 append (' ')가 좋은 아이디어인지, 두 번째 문제는 두 번째 단락 너비가 너무 커서 (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> 

답변

1

사용 $('.p2').append(' '); 대신 $('.p2').append('&nbsp;');

&nbsp; = 줄 바꿈없는 공백

+0

의 – gruber

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/

입니다

요소를 이동하려면 복제하지 말아야합니다. D 메신저 바보 :

1

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