Question

I am trying to use jquery droppable on a nested list, applying a change to the background colour of the li on hover. The problem is that it is only applying to the first item in a list. The alert is still alerting the text within the list item though. Any ideas why this would be happening?

  $("#mailbox li").droppable({
   greedy: true,
   hoverClass: 'mailbox-hover',
   drop: function(event, ui) {
    alert($(this).text());
   }
  });

[Edit]
On some testing, the alert is working right, the hover class is being applied (according to fireBug) but it will only change the text-color when I hover over the first element.

<ul id="mailbox" class="filetree">
  <li>
    <span class="folder">[e-mail]
    </span>
    <ul>
      <li id="0-INBOX">
        <span class="folder">
        </span>
        <a href="#" onclick="changeFolder('0', 'INBOX', 'INBOX');" name="INBOX">INBOX
        </a>
        <ul>
          <li id="0-INBOX-Drafts">
            <span class="file">
            </span>
            <a href="#" onclick="changeFolder('0', 'INBOX.Drafts', 'Drafts');" name="INBOX.Drafts">Drafts
            </a>
          <li id="0-INBOX-Sent">
            <span class="file">
            </span>
            <a href="#" onclick="changeFolder('0', 'INBOX.Sent', 'Sent');" name="INBOX.Sent">Sent
            </a>
          <li id="0-INBOX-Trash">
            <span class="folder">
            </span>
            <a href="#" onclick="changeFolder('0', 'INBOX.Trash', 'Trash');" name="INBOX.Trash">Trash
            </a>
            <ul>
              <li id="0-INBOX-Trash-New">
                <span class="file">
                </span>
                <a href="#" onclick="changeFolder('0', 'INBOX.Trash.New', 'New');" name="INBOX.Trash.New">New
                </a>
            </ul>
        </ul>
    </ul>
  </li>

[css is comments] – Also, possibly related, possibly a css error, it won’t let me set the background-color of the li on hover, only font color.

.mailbox-hover
{
    background-color: #0000ff;
}
.mailbox-dropped
{
    color: #ffff00;
}

[solved] – And finally, it won’t let me alert ($(this).id) even though the all the list items have an id attached.

Answer 1

This for alert:

alert($(this).attr("id"));

This for CSS:

#mailbox li { background-color: #ffffff; } 
#mailbox li.mailbox-hover { background-color: #0000ff;} 
.mailbox-dropped { color: #ffff00; }

I’ll continue to update this answer while we work through…easier formatting here.