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

Question

我正在尝试将 CSS 样式应用到所有具有特定 class.

元素的文本中的第一个句号之前的字符

我最初的尝试是只 select 前 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

Answer 2

另一个解决方案：

$(function () {

    $(".menu-item-text").each(function() {
       var $this = $(this);
        var str = $this.html();
        var index = str.indexOf(".");
        $this.html("<span class='some-class'>" + str.substring(0, index + 1) + "</span>" + str.substring(index + 1, str.length));
    });
});

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

Apply CSS Style Up to the First Period in Every Element with a Certain Class

javascript

jquery

substring

jquery-selectors