從要素獲取數量和跨度

我希望縮進了一些包裹，但是從我的CMS生成的html我似乎無法掛接到的數量和應用樣式。從要素獲取數量和跨度

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

來源

2012-09-20 uriah

對於這一點，一個方法我建議是：

$('.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。

如果CSS是一個選項：

.content { 
    counter-increment: headerNumber; 
} 

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

JS Fiddle demo。

來源

2012-09-20 08:56:37

你可以試試這個方法

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

來源

2012-09-20 05:52:14

注意，對於01世界你好，結果將ONY是01.您好 – Manu

你是對的。感謝您指出。更新了我的答案。 –

這還不是最正統的解決方案，但它可能會滿足您的需求：

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

來源

2012-09-20 05:54:45 Petah

$("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); 

});

來源

2012-09-20 06:10:31 Manu

http://jsfiddle.net/hGeuZ/17/ – Manu

從要素獲取數量和跨度

回答

相關問題