У меня есть список элементов, отображаемых на странице:
<ul class="product-categories">
<li class="cat-item"><a href="#">Bathroom & Plumbing</a>
<ul class='children'>
<li class="cat-item"><a href="#">Bathroom</a>
<ul class='children'>
<li class="cat-item"><a href="#">Basins & Vanity Units</a></li>
<li class="cat-item"><a href="#">Bathroom Accessories</a></li>
<li class="cat-item"><a href="#">Baths & Spas</a></li>
<li class="cat-item"><a href="#">Tapware & Showering</a></li>
<li class="cat-item"><a href="#">Toilets, Seats & 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 & Fittings</a></li>
<li class="cat-item"><a href="#">Solvent & Silicone</a></li>
<li class="cat-item"><a href="#">Stormwater & Drainage</a></li>
</ul>
</li>
</ul>
</li>
<li class="cat-item"><a href="#">Building & Hardware</a>
<ul class='children'>
<li class="cat-item"><a href="#">Building & Construction</a>
<ul class='children'>
<li class="cat-item"><a href="#">Doors - Internal/External</a></li>
<li class="cat-item"><a href="#">Fencing & Gates</a></li>
<li class="cat-item"><a href="#">Insulation</a></li>
</ul>
</li>
<li class="cat-item"><a href="#">Building Supplies & 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 & Mortar</a></li>
<li class="cat-item"><a href="#">Compounds & 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>
... и некоторые jQuery, чтобы препятствовать якоря делать что-либо при нажатии:
$(document).ready(function(){
$(".cat-item a").on("click", function(e){ e.preventDefault(); } );
});
Проблема в том, что я хочу, чтобы у родителей и детей были мертвые якоря, а не внуки.
Любая помощь была бы потрясающей.
Сделай это:
$(".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();
}
} );
Если parentEls.split(",").length ==3
то Grandchild
Если parentEls.split(",").length ==2
то child
Если parentEls.split(",").length ==2
то родительский
Не отличное решение, но вы можете сделать что-то вроде:
$(document).ready(function(){
$(".cat-item a").on("click", function(e){
if (!$(this).parent().parent().hasClass("cat-item"))
e.preventDefault();
} );
});
Или просто добавьте класс к внукам, чтобы различить их.
this.parent.parent
классаthis.parent.parent
?