Ron, together with something that I realized today, that means that after an Ajax altering of the HTML, even a recall of the getElementsByClassName-based function won’t repaint the child elements correctly. The thing is that the classes that were Javascript-set previously are not removed, and new classes are only added. Which means that if the number of child elements changes from odd to even or vice-versa, all of them will be colored pink, in my example.
There are several work-arounds for that, of which I will give you the simplest to begin with. This method assumes that the targeted child elements do not have any other classes set, neither hard-coded in the HTML nor by means of Javascript. This is the code (live demo), which should be self-explanatory:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Remove class name, simple method</title>
<style>
.odd {
background-color: pink;
}
table {
border-collapse: collapse;
margin-bottom: 1em;
}
td {
border: 1px solid black;
}
button {
width: 250px;
}
</style>
</head>
<body>
<div class="alternColorParent">
<p>I am an odd paragraph <span>with a span</span></p>
<p>I am an even paragraph</p>
<p>I am an odd paragraph</p>
<p>I am an even paragraph</p>
<p>I am an odd paragraph</p>
<p>I am an even paragraph</p>
<p>I am an odd paragraph</p>
</div>
<ul class="alternColorParent">
<li>I am an odd list item</li>
<li>I am an even list item</li>
<li>I am an odd list item</li>
<li>I am an even list item</li>
<li>I am an odd list item</li>
<li>I am an even list item</li>
<li>I am an odd list item</li>
</ul>
<table class="alternColorParent">
<tbody>
<tr>
<td>I am the first cell in an odd table row</td>
<td>I am the second cell in an odd table row</td>
</tr>
<tr>
<td>I am the first cell in an even table row</td>
<td>I am the second cell in an even table row</td>
</tr>
<tr>
<td>I am the first cell in an odd table row</td>
<td>I am the second cell in an odd table row</td>
</tr>
<tr>
<td>I am the first cell in an even table row</td>
<td>I am the second cell in an even table row</td>
</tr>
<tr>
<td>I am the first cell in an odd table row</td>
<td>I am the second cell in an odd table row</td>
</tr>
<tr>
<td>I am the first cell in an even table row</td>
<td>I am the second cell in an even table row</td>
</tr>
</tbody>
</table>
<button type="button" onclick="setClassName('odd')">Set class name 'odd'</button>
<br>
<button type="button" onclick="removeClassName('odd')">Remove class name 'odd'</button>
<br>
<button type="button" onclick="setClassNameAnew('odd')">Set class name 'odd' anew</button>
<script>
function setClassName(declaredClassName) {
var alternColorParents = document.querySelectorAll('.alternColorParent');
for (var i=0; i<alternColorParents.length; i++) {
var alternColorParent = alternColorParents[i];
if (alternColorParent.tagName == 'TABLE') { // must be uppercase
var alternColorChildren = alternColorParent.querySelectorAll('tr');
}
else {
var alternColorChildren = alternColorParent.querySelectorAll('.alternColorParent > *');
}
for (var k=0; k<alternColorChildren.length; k+=2) {
alternColorChildren[k].className = declaredClassName;
}
}
}
function removeClassName(declaredClassName) {
var allTargetedElements = document.querySelectorAll('.'+declaredClassName);
for (var i=0; i<allTargetedElements.length; i++) {
allTargetedElements[i].className = ''; // two single quotes, therefore: empty
}
}
function setClassNameAnew(declaredClassName) {
removeClassName(declaredClassName);
setClassName(declaredClassName);
}
</script>
</body>
</html>
There are also methods for when the child elements do have other class names, with a so-called regular expression or the split method, but I am yet to get either of them working in this setting. Creating a live demo or even a code that includes an Ajax update would be too time-consuming for me, so you will just have to believe that the script also works in IE8 and other lesser browsing Gods.
I would suggest to post a new question by the time you would need such a code. If you would want that at all, since the HTML should be kept as clean as possible, as you stated yourself in your original post.
You will also notice that I made the code more generic/universal than thus far.
For two reasons: