将父链接和子链接捕获为一个，到用冒号分隔的标签参数中

Question

我正在尝试实现以下目标： 捕获正在单击的大型菜单链接。如果链接是子链接，请将父链接和子链接捕获为一个，并用冒号分隔到 Label 参数中。

这是指向 HTML 的 jsbin 链接： http://jsbin.com/kuliberefi/edit?html,output

我已经设法获得以下代码来控制台记录我单击的 li，但我无法获取该类别的父链接。 例如。当我进入男装部分并单击衬衫时，它意味着控制台日志"男士：衬衫"。

我的代码：

$(".megaMenuList li").mousedown(function () {
var value = $(this).attr('href');
console.log(value);     
}); 

感谢任何能给我一些建议的人。

Answer 1

您可以拆分href值并获取第二项和第三项(第一项为空)。更新的垃圾箱

$(".megaMenuList a").click(function (e) {
e.preventDefault();
var value = $(this).attr( "href" );
var items = value.split("/");
console.log( items[1] + " : " + items[2] );     
});

Answer 2

如果你想要URL中的值，@gurvinder372答案就可以了。如果您希望在屏幕上打印实际值，此解决方案将起作用。

$(function(){
$('.megaMenuList li a').click(function (e) {
e.preventDefault()

// get the text of the link clicked
var subcat = $(this).text();

// find the H2 that is on top of this megaMenuList
var cat = $(this).closest('.megaMenuList').find( "h2" ).text()  ;  

// output your cat & subcat
if( cat ){
console.log( subcat + ' : ' + cat );
} else {
console.log( subcat );
}
}); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="megaMenuList">
<ul>
<li><a href="/womens/shirts/products">Shirts</a></li>
<li><a href="/womens/dresses/products">Dresses</a></li>
<li><a href="/womens/trousers/products">Trousers</a></li>
<li><a href="/womens/skirts/products">Skirts</a></li>
<li><a href="/womens/socks/products">Socks</a></li>
<li><a href="/womens/underwear/products">Underwear</a></li>
</ul>
</div>
<div class="megaMenuList">
<h2>Clothing</h2>
<ul>
<li><a href="/womens/shirts/products">Shirts</a></li>
<li><a href="/womens/dresses/products">Dresses</a></li>
<li><a href="/womens/trousers/products">Trousers</a></li>
<li><a href="/womens/skirts/products">Skirts</a></li>
<li><a href="/womens/socks/products">Socks</a></li>
<li><a href="/womens/underwear/products">Underwear</a></li>
</ul>
</div>
<div class="megaMenuList">
<h2>Accessories</h2>
<ul>
<li><a href="/womens/jewelry/products">Jewelry</a></li>
<li><a href="/womens/handbags/products">Handbags</a></li>
<li><a href="/womens/shoes/products">Shoes</a></li>
<li><a href="/womens/tights/products">Tights</a></li>
</ul>
</div>