CODEWITHSUNDEEP
javascriptjqueryhtml
nalpara
nalpara

Reputation: 131

jquery id selection change class

$('#sidebar ul li ul li').click(function () {
        var ids = $(this).attr('id');
        $('#ids').addClass('active');
        $('#ids').parent('ul').parent('li').addClass('has-sub active');
        alert(ids); // Will alert the id if the element has one    
    });

I didn't understand why this is not working. alert gives me the id of the li element but the 2 lines before it don't work I mean these 2:

$('#ids').addClass('active');
$('#ids').parent('ul').parent('li').addClass('has-sub active');

Where is the problem? Am I missing something?

enter image description here

Upvotes: 0

Views: 119

Answers (5)

nalpara
nalpara

Reputation: 131

@IshanJain @RoryMcCrossan @j08691 @EliantenHolder thank you for your response. Jquery doesnt help to solve this problem but this helper worked.

public static class HtmlHelperExtensions
{

    public static string ActivePage(this HtmlHelper htmlHelper,string controller, string action)
    {
        string _classValue="";

        string _currentController = htmlHelper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();

        string _currentAction = htmlHelper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();

        if (_currentController == controller && _currentAction == action)
        {
            _classValue = "active";
        }
        else if (_currentController == controller && action.Equals(""))
        {
            _classValue = "has-sub active";
        }
        else
        {
            if (action.Equals(""))
            {
                _classValue = "has-sub";
            }
        }

        return _classValue;
    }
}

and this is from my layout page

<li class="@Html.ActivePage("Order","")">
              <a href="javascript:;" class="">
                  <span class="icon-box"> <i class="icon-dashboard"></i></span> Sipariş Açma

                  <span class="arrow"></span>
              </a>
              <ul class="sub">
                  <li class="@Html.ActivePage("Order","Index")"><a class="" href="@Url.Action("Index","Order")">Sipariş</a></li>
                  <li class="@Html.ActivePage("Order","orderProduct")"><a class="" href="@Url.Action("orderProduct","Order")">Ürün Sipariş</a></li>
                  <li class="@Html.ActivePage("Order","orderCloth")"><a class="" href="@Url.Action("orderCloth","Order")">Kumaş Sipariş</a></li>
                  <li class="@Html.ActivePage("Order","orderAccessory")"><a class="" href="@Url.Action("orderAccessory","Order")">Aksesuar Sipariş</a></li>
              </ul>
          </li>

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8171

ids is a variable which holds the id of clicked element. and in your code:

$('#ids').addClass('active');
$('#ids').parent('ul').parent('li').addClass('has-sub active');

You use ids as a string. This is not correct way. You should replace $('#ids') with $('#' + ids).

Try this:

$('#' + ids).addClass('active');
$('#' + ids).parent('ul').parent('li').addClass('has-sub active');

Upvotes: 1

j08691
j08691

Reputation: 207983

You need to concatenate your variable like:

$('#' + ids).

$('#ids') is looking for an element with the ID of ids. And as Blender noted in the comments, why are you doing it this way? The element you're clicking on could be referred to as simply $(this) or this. To me it might make more sense to do:

$('#sidebar ul li ul li').click(function () {
    $(this).addClass('active').parent('ul').parent('li').addClass('has-sub active');
});

And you might also be able to replace .parent('ul').parent('li') with .closest('li'), but I'd need to see the HTML structure to be sure.

Upvotes: 5

Rory McCrossan
Rory McCrossan

Reputation: 337691

You are taking the id of the current element to concatenate together a selector. Instead, you can use the this keyword within the handler and use it as a reference to the clicked element. Try this:

$('#sidebar ul li ul li').click(function () {
    $(this).addClass('active').closest('li').addClass('has-sub active');  
});

Upvotes: 2

Elian ten Holder
Elian ten Holder

Reputation: 362

Did you mean to apply the new classes to the ids in the variable ids? If so you are currently applying those to elements that have the id of 'ids'. You should use the following selector: $('#'+ids).

Upvotes: 0

Related Questions