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

あなたはこの方法を試すことができます

$('.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 に答える
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 
$("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

このために、私が提案する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フィドルデモ。

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 に答える