CODEWITHSUNDEEP
javascriptjqueryregex
HddnTHA
HddnTHA

Reputation: 1059

Jquery add css class to parent <ul> elements

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

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

Any Help greatly appricated.

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

Upvotes: 1

Views: 1025

Answers (4)

Travis J
Travis J

Reputation: 82267

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>

Upvotes: 1

Pierre Wahlgren
Pierre Wahlgren

Reputation: 875

Try this:

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

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

Upvotes: 1

epascarello
epascarello

Reputation: 207501

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");

Upvotes: 2

Eddie Roman
Eddie Roman

Reputation: 45

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

Upvotes: -1

Related Questions