<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') 

는 child selector API 페이지를 참조하고 descendant selector 비교.