mouseover parent = find() child id name

Question

when mouseover #divlayer, find() id of child span

<div id="divlayer">
        <p>title</p>            

        <span id="apple">apple</span>
        <span id="orange">orange</span>
        <span id="kiwi">kiwi</span>
</div>

$('span').hide();
$('#divlayer').mouseover(function(){
    $('span').show();
    $(this).find(???).attr('id');
});

edit: my bad, I should have clarified my question. the spanchildren are hidden, when the mouse pointer goes over <p>title</p>, id of each span child is returned.

Basically, <p>title</p> is visible at first, and when the mouse goes over the it, children are shown and ids are returned individually.

Answer 1

<div id="divlayer">
        <span class="mouseoverClass" id="apple">apple</span>
        <span class="mouseoverClass" id="orange">orange</span>
        <span class="mouseoverClass" id="kiwi">kiwi</span>
</div>


$(document).ready(function(){
    $('#divlayer').mouseover(function(){
        var accumulator = new Array();
        $(this).find('span').each(function(a,dom){accumulator.push(dom.id);});
        alert(accumulator[0]);
    })
});

here you have it. it takes all id's and pushes it onto accumulator. then you can do whatever you need with these id's

Answer 2

Maybe like this.. (Edited to meet your last requirements)

$('#divlayer').mouseover(function(){
    $('span', $(this)).each(function(){
        alert($(this).attr('id'));
    });
});

Answer 3

Based on your update

$('#divlayer').mouseover(function(){
    $('span').show();
});

$('#divlayer > p').mouseover(function() {
    $('#divlayer').find('span').each(function() {
       alert($(this).attr('id'));
    });
});