Question

如何将一个类动态地分配给段落（通过javascript / CSS）如果该段落包含“Time Recorded：”的措辞？

您会注意到我已使用 class =“dyncontent”类手动分配了段落。

但是，我想动态地将此类分配给包含“Time Recorded：”字样的任何段落标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">')
document.write('.dyncontent{display:none;}')
document.write('</style>')
}
</script>
<div class="right">
<ul>
<li class="say agent public">
<p>Description line 1</p>
<p class="dyncontent">Time Recorded: 5MIN(S)</p>
<p>Another description line</p>
</li>
</ul>
</div>
</body>
</html>

Answer 1

你可以使用jQuery：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 <script>
 $(function(){
      $("p:contains('Time Recorded:')").addClass('dyncontents');
 });
 </script>

Answer 2

$("p").each(function(ele) {if (this.html().indexOf('TimeRecorded') > 1) {$(this).addClass('dyncontent'))}});

Answer 3

我会做indexOf，因为它比innerText更容易匹配

var allP = document.getElementsByTagName('p'),
    pLength = allP.length;
while(pLength--){
    if(allP[pLength].innerHTML.indexOf('Time Recorded') != -1){
    allP[pLength].addClass('dycontents');
    }
}

解释：首先，您获得文档中的所有<p>。然后你循环它们。如果其中任何一个包含Time Recorded的文本，则将其添加到其中。

Answer 4

以下是没有Jquery的解决方案

o = document.getElementsByTagName('p');

    for (i = 0; i < o.length; i++) {
        if (o[i].innerText.indexOf('Time Recorded:') != -1) {
        o[i].className = 'theClassYouWant'; 
        }
    }

动态地将类分配给段落

4 个答案: