CODEWITHSUNDEEP
javascripthtmlcssdynamic
peterj
peterj

Reputation: 72

Dynamically assign class to paragraph

How do you assign a class dynamically to a paragraph (via javascript/CSS) IF the paragraph contains the wording "Time Recorded:"?

You'll notice that I have manually assigned the paragraph with class class="dyncontent".

However, I'd like to dynamically assign this class to any paragraph tag which contain the words "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>

Upvotes: 4

Views: 1029

Answers (4)

SaidbakR
SaidbakR

Reputation: 13534

The following is solution without Jquery 

o = document.getElementsByTagName('p');

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

Upvotes: -1

jtheman
jtheman

Reputation: 7491

You could use 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>

Upvotes: 3

Alex Reynolds
Alex Reynolds

Reputation: 6352

I'd do indexOf because it will match easier than innerText

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

To explain: first you get all the <p> in the document. Then you loop through them. If any of them contain text of Time Recorded you add your class to it.

Upvotes: 1

Amareswar
Amareswar

Reputation: 2064

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

Upvotes: 1

Related Questions