1

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

4

4 回答 4

0 
$("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-20T06:10:31.067 回答
0

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

$('.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 小提琴演示。

如果 CSS 是一个选项：

.content {
    counter-increment: headerNumber;
}

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

JS 小提琴演示。

于 2012-09-20T08:56:37.460 回答
0

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

$('.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-20T05:54:45.943 回答
0

你可以试试这个方法

$('.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-20T05:52:14.387 回答