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

时间:2013-06-13 19:29:09

标签: jquery jquery-selectors

我有一些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-)

但是前面的文字呢?

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

如果您绝对无法更改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');

答案 2 :(得分:1)

您需要将日期包装在某些搜索的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;
}