我是jQuery的新手,所以如果这是一个菜鸟问题,对不起。
我有一个嵌套的类别树和html看起来像;
<ul class="product-cat-list">
<li data-id="1287"><a href="#">PRODUCTS - 1 (MAIN CATEGORY) </a>
<ul>
<li data-id="1200"><a href="#">PRODUCTS - 1.1</a></li>
<li data-id="1203"><a href="#">PRODUCTS - 1.2</a>
<ul>
<li data-id="1204"><a href="#">PRODUCTS - 1.2.1</a></li>
<li data-id="1205"><a href="#">PRODUCTS - 1.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li data-id="1288"><a href="#">PRODUCTS - 2 (MAIN CATEGORY)</a>
<ul>
<li data-id="1300"><a href="#">PRODUCTS - 2.1</a></li>
<li data-id="1303"><a href="#">PRODUCTS - 2.2</a>
<ul>
<li data-id="1304"><a href="#">PRODUCTS - 2.2.1</a></li>
<li data-id="1305"><a href="#">PRODUCTS - 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我正在使用PHP的$ _GET超级全局($ _GET ['category'])获取类别ID。
如果我在PRODUCTS - 2.2.2
我的网址上看起来像products.php?category=1305
问题:我如何active
仅为其父类添加(例如)css类ul
?
所以结果一定是
<ul class="product-cat-list">
<li data-id="1287"><a href="#">PRODUCTS - 1 (MAIN CATEGORY) </a>
<ul>
<li data-id="1200"><a href="#">PRODUCTS - 1.1</a></li>
<li data-id="1203"><a href="#">PRODUCTS - 1.2</a>
<ul>
<li data-id="1204"><a href="#">PRODUCTS - 1.2.1</a></li>
<li data-id="1205"><a href="#">PRODUCTS - 1.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li data-id="1288"><a href="#">PRODUCTS - 2 (MAIN CATEGORY)</a>
<ul class="active">
<li data-id="1300"><a href="#">PRODUCTS - 2.1</a></li>
<li data-id="1303"><a href="#">PRODUCTS - 2.2</a>
<ul class="active">
<li data-id="1304"><a href="#">PRODUCTS - 2.2.1</a></li>
<li data-id="1305"><a href="#">PRODUCTS - 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我尝试像上面的正则表达式一样获取URL参数,并且它可以工作。但是我不能active
在ul
s上添加css类。
任何帮助都非常适用。
// Getting URL Parameter
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results[1] || 0;
}
// Products sidebar
var dataid = $('#product-cat-list > li').data('id');
if( dataid == $.urlParam('category')){
find($('#product-cat-list > ul').addClass('active'))
};
选择li by data属性并用于parents()
获取uls。
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
$( function() {
var id = getParameterByName("category"); //1035;
var li = $("li[data-id=" + id + "]");
li.parents("ul").addClass("active");
});
如果要排除第一个ul,则使用 not()
li.parents("ul").not(".product-cat-list").addClass("active");
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句