jQuery closest ID to my list

Question

Hi Folks

Hope you can advise, I'm trying to find the closest or a parent id. I think its maybe easier to show you.

Here is some example code.

<li id="search" class="widget color-green">
  <div class="widget-head"></div>
    <div class="edit-box" style="">
    <li class="item">
      <label>Available colors:</label>
        <ul class="colors">
          <li class="color-yellow"/>
          <li class="color-red"/>
       </ul>
    </li>
  </div>
</li>

So in this example If I click on list item color-red or color-yellow I want to find out the value of the closest id which in this example would be search

Ive tried a number of ways and cant seem to pin it down.

Hope someone can advise and thank you in advanced if you can.

Answer 1

This will meet your requirements:

$(function() {
    $('ul.colors > li').click(function() {
        alert($(this).closest('[id]').attr('id'));
    });
});

It checks for the nearest parent of the clicked element that has the id attribute.