How can I also add class to the last list for the second list block in IE?

Question

I have 2 list and i want to add a class ="last" to the list item 5 for both. they seem to work fine on firefox. it add green to both list item 5.

But in IE7 it adds only the first list item 5, not the second

How can I also add class last it to the second list block as well for IE?

.last { background-color: green; }

with:

jQuery(document).ready(function() {
  // Add first and last menu item classes
  $('ul.menu li:first-child').addClass('first_item');
  $('#menu > li:last-child').addClass('last');
});

and:

<ul id="menu">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
<br />

<ul id="menu">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
<br />

Answer 1

The problem is you're using the id menu twice. That's not allowed and why it isn't working. Give it a class instead:

<ul class="menu">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

with:

$(function() {
  $("ul.menu > li:last-child").addClass("last");
});