get the id of the first div within the clicked li

Question

<li class="intro-item">
    <a href="...">Something</a>
        <div id="bar1"></div>
        <div id="bar2"></div>
        <div id="bar3"></div>
        <div id="bar4"></div>
        <div id="bar5"></div>
</li>

I want to get the id of the first div (it's bar1 here) when li is clicked. And there are more lis same as above. All those lis also have the CSS class "intro-item" When I click each of these, I want to get the id of first div.

The idea is like this

$('li.intro-item').click(function(){
    alert($('(this) div:first').attr('id'));// here I can't apply this keyword that's the problem.
    });

Answer 1

Pass this as a context to jQuery

$('li.intro-item').click(function () {
    alert($('div:first', this).attr('id')); //or $(this).find('div:first')
});