jQuery将CSS类添加到父<ul>元素

甲骨文

我是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参数,并且它可以工作。但是我不能activeuls添加css类

任何帮助都非常适用。

// Getting URL Parameter
    $.urlParam = function(name){
        var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').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'))
    };
epascarello

选择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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将类添加到父元素

来自分类Dev

输入无效时,Angular是否可以将CSS类添加到父/兄弟元素

来自分类Dev

如何使用jQuery中的prepend()方法获取添加到html <ul>元素中的html <li>元素的id值?

来自分类Dev

根据URL将活动类添加到父元素

来自分类Dev

将类添加到子元素但不添加到父元素

来自分类Dev

jQuery将类添加到此单击的元素

来自分类Dev

使用javascript / jquery将随机的CSS类添加到随机元素

来自分类Dev

将列表元素动态添加到ul元素

来自分类Dev

单击提交按钮时如何使用JavaScript将li元素添加到ul

来自分类Dev

在将<li>元素添加到<ul>时应用淡入效果

来自分类Dev

如何使用jQuery根据子类将类添加到父元素

来自分类Dev

使用jQuery将类添加到html元素

来自分类Dev

将类添加到循环中的元素(jquery)

来自分类Dev

输入无效时,Angular是否可以将CSS类添加到父级/同级元素

来自分类Dev

<ul>-浮动李的-父元素宽度

来自分类Dev

如何使用jQuery中的prepend()方法获取添加到html <ul>元素中的html <li>元素的id值?

来自分类Dev

将CSS类添加到Angularjs中的标记元素

来自分类Dev

依次将CSS类添加到div元素

来自分类Dev

从jQuery的css之前,将css添加到children元素

来自分类Dev

Umbraco7导航:将类添加到父UL

来自分类Dev

将元素添加到按时间和ID排序的ul列表中

来自分类Dev

jQuery将类添加到嵌入元素

来自分类Dev

jQuery - 如果子元素具有特定的 css 类,如何将 css 添加到父元素

来自分类Dev

如何使用 Jquery 仅将活动类添加到一个父元素?

来自分类Dev

将类添加到直接后代 ul 元素

来自分类Dev

使用javascript将css类添加到ul中的所有li父元素

来自分类Dev

将类添加到 Wordpress 菜单 ul 元素

来自分类Dev

将类添加到 CKEditor 中的特定父元素

来自分类Dev

将类添加到父跨度元素 jquery

Related 相关文章

  1. 1

    将类添加到父元素

  2. 2

    输入无效时,Angular是否可以将CSS类添加到父/兄弟元素

  3. 3

    如何使用jQuery中的prepend()方法获取添加到html <ul>元素中的html <li>元素的id值?

  4. 4

    根据URL将活动类添加到父元素

  5. 5

    将类添加到子元素但不添加到父元素

  6. 6

    jQuery将类添加到此单击的元素

  7. 7

    使用javascript / jquery将随机的CSS类添加到随机元素

  8. 8

    将列表元素动态添加到ul元素

  9. 9

    单击提交按钮时如何使用JavaScript将li元素添加到ul

  10. 10

    在将<li>元素添加到<ul>时应用淡入效果

  11. 11

    如何使用jQuery根据子类将类添加到父元素

  12. 12

    使用jQuery将类添加到html元素

  13. 13

    将类添加到循环中的元素(jquery)

  14. 14

    输入无效时,Angular是否可以将CSS类添加到父级/同级元素

  15. 15

    <ul>-浮动李的-父元素宽度

  16. 16

    如何使用jQuery中的prepend()方法获取添加到html <ul>元素中的html <li>元素的id值?

  17. 17

    将CSS类添加到Angularjs中的标记元素

  18. 18

    依次将CSS类添加到div元素

  19. 19

    从jQuery的css之前,将css添加到children元素

  20. 20

    Umbraco7导航:将类添加到父UL

  21. 21

    将元素添加到按时间和ID排序的ul列表中

  22. 22

    jQuery将类添加到嵌入元素

  23. 23

    jQuery - 如果子元素具有特定的 css 类,如何将 css 添加到父元素

  24. 24

    如何使用 Jquery 仅将活动类添加到一个父元素?

  25. 25

    将类添加到直接后代 ul 元素

  26. 26

    使用javascript将css类添加到ul中的所有li父元素

  27. 27

    将类添加到 Wordpress 菜单 ul 元素

  28. 28

    将类添加到 CKEditor 中的特定父元素

  29. 29

    将类添加到父跨度元素 jquery

热门标签

归档