JSFiddle - React, Tailwind, and code Playground

by laubstein

HTML

<div>
    <div class="sou-o-pai">
        <ul>
            <li><a href="#" id="clique">clique</a></li>
            <li><a href="#" id="clique2">clique</a></li>
            <li><a href="#" id="clique3">clique</a></li>
            <li><a href="#" id="clique4">clique</a></li>
        </ul>
        <hr />
        <ul>
            <li><a href="#" id="2clique">clique</a></li>
            <li><a href="#" id="2clique2">clique</a></li>
            <li><a href="#" id="2clique3">clique</a></li>
            <li><a href="#" id="2clique4">clique</a></li>
        </ul>
    </div>
</div>

CSS

.sou-o-pai {
    background-color: #f00;
    width: 100%;
}

JavaScript

$('div.sou-o-pai').on('click', function(e) {
    if ($('a', e.target).size() == 0) {
        $('body').append('<p>Clicou!</p>');
    }
});

$('#clique').on('click', function() {
   //alert($(this).parents('div.sou-o-pai').size());
    $(this).parents('div.sou-o-pai').click();
});

$('ul').each(function() {
    $(this).find('a').each(function(idx, item) {
        if (item.id === 'clique2' || item.id === '2clique2') {
            return false;
        }
        $('body').append('' + $(item).attr('id') + '<br>');
    });
});