요소에서 번호 가져 오기 및 범위로 감싸기

Question

숫자를 들여 쓰기를 원했지만 HTML로 내 CMS에서 생성되었으므로 숫자에 연결하여 스타일을 적용 할 수 없습니다.

<div class="content"> 
<b>01. Header</b> 
Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, anim odio hic autem 
delectus qui labore rerum irure autem 
</div> 

범위에 숫자를 포함하고 싶습니다. 모든 내용이 동일합니다. 02. [공간] 제목 여기

<div class="content"> 
<span="indent">01. </span><b>Header</b> 
Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, anim odio hic autem 
delectus qui labore rerum irure autem 
</div> 


.indent{ 
    margin-left: -30px; 
} 

내가 시작하지만 난 빈 공간을 포함하는 제 3 자에 트림 수없는 것 것입니다.

$('.content b').each(function() { 
var tmp = [], 
    collecting = false; 

$(this).contents().each(function() { 
    if (this.nodeType === Node.TEXT_NODE && $.trim(this.nodeValue).length > 0) { 
     if (collecting) { 
      tmp.push(this); 
      return false; 
     } 
     else { 
      collecting = true; 
     } 
    } 

    if (collecting) { 
     tmp.push(this); 
    } 
}); 

$(tmp).wrapAll('<span class="indent" />'); 
});​ 

http://jsfiddle.net/hGeuZ/

Answer 1

, 한 가지 방법은 다음과 같습니다

$('.content b:first-child').replaceWith(
    function(i,h){ 
     return h.replace(/(\d+.\s)([\d\D]*)/g,'<span class="indent">$1</span><b>$2</b>'); 
    });​ 

JS Fiddle demo.

.content { 
    counter-increment: headerNumber; 
} 

.content b:first-child::before { 
    content: counter(headerNumber, decimal-leading-zero); 
    padding-right: 2em; 
    color: #f90; 
}​ 

JS Fiddle demo :

는 CSS는 옵션 인 경우.

Answer 2

당신은 이런 식으로 여기

$('.content b').each(function() { 
    var txtArr = $(this).text().split(' '); 

    $(this).before('<span class="indent">'+txtArr [0]+'</span>') 

    txtArr.shift() 
    $(this).text(txtArr.join(' ')) 

}); 

데모가를 시도 할 수 http://jsfiddle.net/hGeuZ/19/

Answer 3

이 가장 정통 해결책은 아니지만 그것은 당신의 요구에 맞게 수 있습니다

를

$('.content b').each(function() { 
    var result = $(this).text().replace(/([0-9]+\.)/, '<span class="indent">$1</span>'); 
    $(this).html(result).find('.indent').remove().insertBefore(this); 
});​ 

내가 좋을 것

http://jsfiddle.net/hGeuZ/10/

이 들어

Answer 4

$("b").each(function() { 
    var $title = $(this).html(); 
    var spaceIndex = $title.indexOf(" "); 
    var num = $title.substring(0, spaceIndex+1); 
    var text = $title.substring(spaceIndex+1, $title.length) 
    console.log(num+text); 
    num = '<span class="indent">'+ num + '</span>'; 
    $(this).html(num + text); 

});