如何将类添加到特定的 html 元素，如果它们包含某个值
Posted
技术标签:
【中文标题】如何将类添加到特定的 html 元素，如果它们包含某个值【英文标题】：How do I add a class to specific html elements, If they contain a certain value 【发布时间】：2012-01-12 08:51:43 【问题描述】：例如，我有以下html：
<div id="stuff">
<span>1</span><span>2</span><span>3</span>
</div>
我需要以这种方式选择一些：
$('#stuff').find('<span>1</span><span>2</span>').addClass('2');
应该把html变成这样：
<div id="stuff">
<span class="2">1</span><span class="2">2</span><span>3</span>
</div>
但是，上述方法不起作用。任何人都知道如何使用 jQuery 通过查找 html 直接从 DOM 中选择内容？
另外，必须按顺序选择跨度，所以如果我有这个：
<div id="stuff">
<span>2</span><span>3</span><span>1</span>
</div>
并且使用了上面的JS，它不会做任何事情。
【问题讨论】：
你需要一些方法来区分你想要选择的跨度。 那么，标准是什么？我们了解需要发生什么，但您是否总是希望选择1 和 2？
抱歉，有人删除了底部，其中包含一些关键信息。现在回来了
所以你想通过 HTML 字符串匹配？
是的，这正是我想要的
【参考方案1】：
使用$( '#stuff span:not(:contains(3))' ).addClass( '2' )
【讨论】：
这只是一个例子。我会有数百个跨度，其中包含各种不同的东西。 我知道我的问题很不寻常，我已经使用 jquery 多年了。但是，我想不出一个好的方法来实现这一点。 更好地解释你想要什么......选择数组中的所有元素，并添加类 2？ 不，只是我要选择的那些，而我要选择的必须是有序的...谢谢您的回复。【参考方案2】：对，如果要查找各种内容，请这样做：
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function()
var contains = [ 1 , 2 , 6 , 7 , 8 ] ;
$.map ( contains, function ( i )
$ ( '#stuff span:contains("'+ i +'")' ).addClass ( '2' ) ;
) ;
);
</script>
</head>
<body>
<div id="stuff">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
</body>
输出：
<div id="stuff">
<span class="2">1</span>
<span class="2">2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span class="2">6</span>
<span class="2">7</span>
<span class="2">8</span>
</div>
【讨论】：
【参考方案3】：您可以使用:contains 伪类：
$('#stuff span:contains(1), #stuff span:contains(2)').addClass('2');
http://jsfiddle.net/SJxTu/
【讨论】：
【参考方案4】：我不完全清楚您的选择条件是什么，但是您可以使用带有函数的 jquery 过滤器方法来选择跨度。
例如来自文档：
$('li').filter(function(index)
return $('strong', this).length == 1;
).css('background-color', 'red');
http://api.jquery.com/filter/
您需要检查 $(this).text() === 不管什么
【讨论】：
以上是关于如何将类添加到特定的 html 元素，如果它们包含某个值的主要内容，如果未能解决你的问题，请参考以下文章