Как не нажимать на теги sub <a>?

Question

Как я могу щелкнуть только первый уровень тега, но не другие теги, встроенные в первый уровень?

Например, это HTML,

 <!-- tile-tag -->
<div class="tile-tag">

    <h3>tags</h3>
    <ul>
    <li>
        <span>&#43;</span><a href="#">pr</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">interfaith</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">green</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">Tole-rants</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">media-training</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">public speaking</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">ethics</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">clients</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">people</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

</div>
<!-- tile-tag -->

jquery,

$('.tile-tag a').click(function(){
        //alert($(this).text());

        // Set the variable.
        var parent_object = $(this).parent();
        var siblings_parent = parent_object.siblings();

        // Clean all siblings' style.
        siblings_parent.removeClass('current-tag');
        $('span:first',siblings_parent).html('+');
        $('ul',siblings_parent).slideUp('fast');

        // Attach style to object's parent.
        parent_object.toggleClass('current-tag');
        $('ul',parent_object).slideToggle('fast');

        // Swap the object's parent's span html
        if(parent_object.hasClass('current-tag')) $('span:first',parent_object).html('–');
        else $('span:first',parent_object).html('+');

        return false;
    });

$('.tile-tag a') это будет применяться ко всем тегам, включая вложенные теги.но я не применяю этот код к вложенным тегам.

Как мне этого добиться?

Answer 1

То есть, вы хотите, чтобы те в первом ul?

$('.tile-tag > ul > li > a')

См. Страницу API дочернего селектора *1005* и сравните с селектором потомков .