Jquery将css类添加到父级 <ul> 分子

Question

I'm new on jquery so if this is a noob question sorry for all.

I have a nested category tree and html Looks like;

<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>

I'm getting category id with PHP's $_GET super global ($_GET['category']).

If i'm on PRODUCTS - 2.2.2 my url looks like products.php?category=1305

Question: How can i add (for. eg.) active css class only it's parent ul s ?

So result must be looks like;

<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>

I try to fetch URL parameter like above regex and it works. But i can not add active css class on ul s.

Any Help greatly appricated.

// 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'))
    };

Answer 1

Select the li by data attribute and use parents() to get the 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");
});

If you want to exclude the first ul, than use not()

li.parents("ul").not(".product-cat-list").addClass("active");

Answer 2

jsFiddle Demo

You can use a combination of selecting based on the data-id and parentsUntil to do this.

 var dataid = 1305;//$.urlParam('category') $('li[data-id='+dataid+']')//find elements with data-id equal to 1305 .parentsUntil('.product-cat-list')//find element's parents prior to cat-list .find('ul')//only take the ul elements of the parents .addClass('active');//add class active to them 

 .active, .active a{ color:red; text-decoration:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 3

Try this:

var id = $.urlParam('category');
var active = $('[data-id=' + id + ']');

active.parents('ul:not(.product-cat-list)').addClass('active');

Answer 4

If you only want the first UL in #product-cat-list the It should probably be:

    if( dataid == $.urlParam('category')){
        $('#product-cat-list > ul:first).addClass('active');
    });

If you want the first UL in every LI, it would be:

    if( dataid == $.urlParam('category')){
         $('li > ul:first).addClass('active');
    });

And every UL would be:

    if( dataid == $.urlParam('category')){
         $('li > ul).addClass('active');
    });