jQuery：防止父母和孩子被点击，但允许孙子

Question

I've got a list of items being displayed on a page like this:

<ul class="product-categories">
  <li class="cat-item"><a href="#">Bathroom &amp; Plumbing</a>
    <ul class='children'>
      <li class="cat-item"><a href="#">Bathroom</a>
        <ul class='children'>
          <li class="cat-item"><a href="#">Basins &amp; Vanity Units</a></li>
          <li class="cat-item"><a href="#">Bathroom Accessories</a></li>
          <li class="cat-item"><a href="#">Baths &amp; Spas</a></li>
          <li class="cat-item"><a href="#">Tapware &amp; Showering</a></li>
          <li class="cat-item"><a href="#">Toilets, Seats &amp; Cisterns</a></li>
        </ul>
      </li>
      <li class="cat-item"><a href="#">Plumbing</a>
        <ul class='children'>
          <li class="cat-item"><a href="#">Plumbing Accessories</a></li>
          <li class="cat-item"><a href="#">Plumbing Tools</a></li>
          <li class="cat-item"><a href="#">PVC Pipe &amp; Fittings</a></li>
          <li class="cat-item"><a href="#">Solvent &amp; Silicone</a></li>
          <li class="cat-item"><a href="#">Stormwater &amp; Drainage</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="cat-item"><a href="#">Building &amp; Hardware</a>
    <ul class='children'>
      <li class="cat-item"><a href="#">Building &amp; Construction</a>
        <ul class='children'>
          <li class="cat-item"><a href="#">Doors - Internal/External</a></li>
          <li class="cat-item"><a href="#">Fencing &amp; Gates</a></li>
          <li class="cat-item"><a href="#">Insulation</a></li>
        </ul>
      </li>
      <li class="cat-item"><a href="#">Building Supplies &amp; Materials</a>
        <ul class='children'>
          <li class="cat-item"><a href="#">Bracing</a></li>
          <li class="cat-item"><a href="#">Brick Ties</a></li>
          <li class="cat-item"><a href="#">Cement &amp; Mortar</a></li>
          <li class="cat-item"><a href="#">Compounds &amp; Adhesives</a></li>
          <li class="cat-item"><a href="#">Construction Adhesives</a></li>
          <li class="cat-item"><a href="#">Dampcourse</a></li>
          <li class="cat-item"><a href="#">Metre Boxes</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

...and some jQuery to prevent the anchors from doing anything when clicked:

$(document).ready(function(){
$(".cat-item a").on("click", function(e){ e.preventDefault(); } );
});

The problem is I only want the parents and children to have dead anchors, not the grandchildren.

Any assistance would be awesome.

Answer 1

Not a great solution, but you can do something like:

$(document).ready(function(){
    $(".cat-item a").on("click", function(e){
        if (!$(this).parent().parent().hasClass("cat-item"))
            e.preventDefault();
    } );
});

Or simply append a class to the grandchildrens to discern them.

Answer 2

Do this :

    $(".cat-item a").on("click", function(e){ 

            var parentEls = $(this).parents()
              .map(function() {
                if(this.tagName=="UL")
                    return this.tagName;
              })
              .get()
              .join( ", " );

             if( parentEls.split(",").length <3 ){

                e.preventDefault();     
             }


        } );

If parentEls.split(",").length ==3 then Grandchild

If parentEls.split(",").length ==2 then child

If parentEls.split(",").length ==2 then parent