javascript - 将 CSS 样式应用到具有特定类的每个元素的第一个句点

Question

我正在尝试将 CSS 样式应用于具有特定类的每个元素的文本中第一个句点之前的所有字符。

我最初的尝试是仅选择前 2 个字符，但如果有子项(例如:“D (i).”和“D (ii).”)，则不起作用

HTML

    <div class="container content">
        <div class="row">
            <div class="col-md-3 lefty">
                <div id="left-nav">
                    <ul>
                        <li><a class="nav-button active" href="#"><span class="menu-item-text">A. Link 1</span></a></li>
                        <li><a class="nav-button" href="#"><span class="menu-item-text">B. Link 2</span></a></li>
                        <li><a class="nav-button" href="#"><span class="menu-item-text">C. Link 3</span></a></li>
                        <li><a class="nav-button" href="#"><span class="menu-item-text">D. Link 4</span></a></li>
                        <li><a class="nav-button" href="#"><span class="menu-item-text">D(i). Link 4a</span></a></li>
                        <li><a class="nav-button" href="#"><span class="menu-item-text">D(ii). Link 4b</span></a></li>
                        <li><a class="nav-button" href="#"><span class="menu-item-text">E. Link 5</span></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9 righty">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. Vivamus dolor nulla, tempor a vulputate at, auctor ac ex. Praesent vestibulum lorem vitae lectus fringilla, vitae aliquet velit consequat. Mauris erat urna, dictum ut aliquam at, accumsan eget leo. Cras vel egestas arcu, quis scelerisque libero. Pellentesque vulputate varius scelerisque. Proin elementum urna vitae enim tincidunt, et commodo massa sagittis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. Vivamus dolor nulla, tempor a vulputate at, auctor ac ex. Praesent vestibulum lorem vitae lectus fringilla, vitae aliquet velit consequat. Mauris erat urna, dictum ut aliquam at, accumsan eget leo. Cras vel egestas arcu, quis scelerisque libero. Pellentesque vulputate varius scelerisque. Proin elementum urna vitae enim tincidunt, et commodo massa sagittis.</p>

            </div>
        </div>
    </div>

尝试 jQuery

$(function () {

    var $str = $(".menu-item-text").slice(0, 2);

    $($str).css("font-weight", "bold");

});

fiddle : http://jsfiddle.net/jameelmoses/uo17qc94/12/

Answer 1

您无法使用 CSS 定位文本节点。

最好的选择是在数字周围添加一些标记，然后您可以设置样式。

如果这不可行，那么您必须使用 JavaScript 继续并按第一个句点拆分项目，将前半部分包装在一个元素中，我选择 span 。再次将各个部分连接在一起，并将您的样式应用到新添加的<span>

// We'll use the .html() method, since it's the HTML we'll be changing
var $str = $(".menu-item-text").html(function(_,v){

  // Split initial value on the first period found
  var parts = v.split(/\.(.+)/);

    // Return new HTML, with item nos wrapped in a span
    return '<span class="some-class">' + parts[0] + '</span>.' + parts[1];
})

JSFiddle