I've got a web page in Sharepoint that I have to edit, specifically I have to modify the content of certain lis on the page. However I can't do the following:

- Add classes or IDs to elements on the page
- Use existing css classes or ids because the classes names are dynamically generated on run time and not predictable. The classes use randomly generated numbers that change and are applied on the fly.

So I'm somewhat hamstrung on how I can target DOM elements. I'm trying to target some lis that have a grey border on the top.

Here is some sample code:

	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="Pierre Lemoine" />
	<title>Untitled 1</title>
    .borderGray {
        border-top: 1px solid #d8d8d8;
    <script language="javascript" type="text/javascript" src="/courier/Style Library/Scripts/jquery-1.6.4.min.js"></script>

    <li>Item 1</li>
    <li>Item 2</li>
    <li class="borderGray">Item 3</li>
    <li>Item 4</li>

<script lang="javascript">
setTimeout(function() {
    var commentCollection = $("li").filter(function(index){return $(this).css("border-top-color") == "#d8d8d8";});
    $(commentCollection).each(function(index) {
      alert(index + ': ' + $(this).text());
    alert('code complete');
}, 3000);
The javascript at the bottom is trying to target only the lis which have a border-top which is grey (#d8d8d8). I've gone over the jquery code in detail and can't find why this isn't working for me. When I run the page in IE7, it returns the content of the third li which is "Item 3". However if I run this in Firefox or chrome it doesn't enter the loop.

It appears that the variable "commentCollection" is not properly finding the page elements. Any ideas? Thanks.