CODEWITHSUNDEEP
javascriptjqueryhtml
Korl
Korl

Reputation: 105

How to get parent element?

I have this part of HTML:

<div id="menu">
    <ul>
        <li><a href="/">Startseite</a></li>
        <li class="active"><a href="/pacmodule/glass">Brillengl&#228;ser</a></li>
        <li><a href="/pacmodule/completeglass">Komplettbrille</a></li>
        <li><a href="/t/Comingsoon">Sportbrillen</a></li>
        <li><a href="/PacCategoryRedirect/0">Marketing</a></li>
        <li><a href="/customer/statistics">Statistik</a></li>
     </ul>
</div>

I want to remove class="active" parameter and set it in li tag where I have href="/pacmodule/completeglass" atribute.

First part I successfully done with jquery:

$("#menu").find("ul:first").find(".active").removeClass("active");

But I have problems with second part. This select just a tag:

$('a[href="/pacmodule/completeglass"]').parent().html();

And this all ul tag:

$('a[href="/pacmodule/completeglass"]').parent().parent().html();

How can I set class="active" attribute in li tag where href="/pacmodule/completeglass"

Thank you for help.

Upvotes: 2

Views: 101

Answers (5)

Genjuro
Genjuro

Reputation: 7745

why don't you try this :

$("#menu").find("ul:first").find(".active").removeClass("active");
$('a[href="/pacmodule/completeglass"]').parent().addClass("active");

you might wanna check this fiddle

Upvotes: 0

Emil &#214;rtberg
Emil &#214;rtberg

Reputation: 85

$("#menu").find("ul:first").find(".active").removeClass("active");

This can be made more effective writing it as:

$("#menu").find("li.active").removeClass("active");

Then the DOM dont need to search for any ul, instead it goes directly to the class .active

Upvotes: 0

Maurizio Battaghini
Maurizio Battaghini

Reputation: 478

Easily do this (into your js document):

$("#menu li").removeClass("active");
$('a[href="/pacmodule/completeglass"]').parent().addClass("active");

Upvotes: 0

Hamix
Hamix

Reputation: 1335

.closest()

$("li").removeClass("active").find($('a[href="/pacmodule/completeglass"]')).closest('li').addClass('active');

DEMO

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93611

You do not need the html() calls. They just return the innerHTML as a string. You probably expected that would return the outerHTML (for the outerHTML use something like ...parent()[0].outerHTML)

Try this:

$('a[href="/pacmodule/completeglass"]').closest('li').addClass('active');

It will find the anchor based on the href = "/pacmodule/completeglass", then find the closest ancestor that is an LI, then add the class active to it.

closest is the most useful way to find an ancestor of a specific type. It is better than using parent() as closest copes with the HTML structure changing.

Note: If you explain the overall aim, there may be better ways to do this than searching for the link href :)

Update

You do not want to remove the previous selection with this as it is too specific:

$("#menu").find("ul:first").find(".active").removeClass("active");

try this instead:

$("#menu li.active").removeClass("active");

Upvotes: 1

Related Questions