CODEWITHSUNDEEP
jqueryhtmlcss
Slimshadddyyy
Slimshadddyyy

Reputation: 4073

jQuery change Href based on li class

HTML Structure:

<li class="page_item page-item-7 page_item_has_children">
<a href="http://localhost/myproject/parent/">Parent</a>
<i class="fa fa-caret-right"></i>
<ul class="children">
<li class="page_item page-item-9">
<a href="http://localhost/myproject/parent/Child One/">Child One</a>
</li>
<li class="page_item page-item-10">
<a href="http://localhost/myproject/parent/Child Two/">Child Two</a>
</li>
</ul>
</li>

jQuery:

jQuery(document).ready(function() {
            jQuery('li.page_item_has_children a[href*="/parent/"]').attr("href", "#");
});

The above code works and changes the URL for Parent but along with it changes the URL for its Children too. So the resulting html is

Output:

<li class="page_item page-item-7 page_item_has_children">
<a href="#">Parent</a>
<i class="fa fa-caret-right"></i>
<ul class="children">
<li class="page_item page-item-9">
<a href="#">Child One</a>
</li>
<li class="page_item page-item-10">
<a href="#">Child One</a>
</li>
</ul>
</li>

How can I change only the Parent href and not its pertaining children elements ?

Upvotes: 0

Views: 1271

Answers (2)

Milind Anantwar
Milind Anantwar

Reputation: 82241

Use immediate child selector >.

Selects all direct child elements specified by "child" of elements specified by "parent".

jQuery(document).ready(function() {
        jQuery('li.page_item_has_children > a').attr("href", "#");
});

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : You need to use > for finding direct child

jQuery(document).ready(function() {
   jQuery('li.page_item_has_children > a[href*="/parent/"]').attr("href", "#");
});

Upvotes: 2

Related Questions