jquery onClick: bring-to-front parent div retaining access to its id

Question

I have the following nested structure echoed repeatedly in php:

<div class="item modal-trigger" id="{$count}"> 
    <div class="ref-title"> 
        <div class="ref-name">{$title}</div>
        <div id="content-{$count}" style="display:none;"> 
            <h3>{$title}</h3>
            <h4>{$period}</h4>
            <h5>Client: {$client}</h5>
            <h5>Partenaires: {$partenaires}</h5>
            <p>
            {$content} 
            </p>
        </div>
        <div class="ref-year"> {$period} </div>
    </div>
</div>

$count is an index which generates an id in php for each ".item" element. I then need to fire a modal window which will display the content of the div with id="content-{$count}" when the user clicks anywhere on the ".item" element:

$(".item").click(function (event) {
    var modalID = "#content-";
    modalID += event.target.id;
    $(modalID).modal();
    return false;
});

The problem is that when I click on the children elements, I don't get the {$count} id to target the hidden div. There are several questions on how to ignore children elements onclick, or how to get parent id etc. But I was wondering if there is a simple way to just "bring a transparent parent div to front" instead of trying to go up the dom depending at which nested level the user clicked each time...

Thanks

Answer 1

You don't have to get the target.id, just get

modalID +=  $(this).attr('id'); 

This will work.