Question

我希望缩进一个数字，但是从我的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;
}

这是我已经开始的但是我似乎无法将其修剪为前三个字符，包括空格。

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

这不是最正统的解决方案，但它可能适合您的需求：

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

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

});

Answer 4

为此，我建议的一种方法是：

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

从元素中获取数字并用span包装

4 个答案: