Question

我有一些HTML，例如

<div class="abstract">Nov 12, 2009 <b>...</b> Tender and flavorful, 
<b>veal</b> cutlets are lean and quick-cooking. If <b>veal</b> 
isn't for you though, feel free to substitute chicken cutlets 
for a classic <b>...</b>
</div>

我想在开始时以不同的方式设置日期。

我想我可以使用像

这样的第一个b标签

$('.abstract b:contains("...")).css(-something-)

但是前面的文字呢？

Answer 1

我会将该文本封装在某种范围内，例如<div class="abstract">Nov 12, 2009...，然后您可以使用$(".abstract .date-year")。如果您无法访问该页面，则可以使用$(".abstract").html()获取内部文本，查找的第一个实例，然后将其子串出来。

Answer 2

如果您绝对无法更改HTML，则可以执行以下操作：

$('.abstract').contents().filter(function() {
    return this.nodeType === 3 && $(this).next().is('b:contains("...")');
}).first().wrap('<span>').parent().addClass('date');

演示：http://jsfiddle.net/HLLDG/

如果日期始终是第一个文本节点，则可以在过滤器中删除第二个条件：

$('.abstract').contents().filter(function() {
    return this.nodeType === 3;
}).first().wrap('<span>').parent().addClass('date');

Answer 3

您需要将日期包装在某些搜索的HTML标记中，以便您可以对其应用样式规则，否则浏览器无法知道您想要的样式是什么，以及另一种方式。

之后你不需要任何jQuery;只需应用CSS规则：

<div class="abstract"><span>Nov 12, 2009</span> <b>...</b> Tender and flavorful, 
<b>veal</b> cutlets are lean and quick-cooking.

CSS：

.abstract>span {
   color: red;
}

jQuery：在包含字符串的标记之前选择文本

3 个答案: