0
186
ViewsjQuery addClass to a child element not working in Egde
I have this structure:
<ul>
<li class="js-drilldown-back"><a>Back</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
and I'm trying to add a class to the first tag, so it becomes this:
<ul>
<li class="js-drilldown-back"><a class="click-back">Back<a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
The framework I use is adding this back button dynamically, so I can't manually add the class to it. I have tried this code:
$(".js-drilldown-back").children("a").addClass("click-back")
but it doesn't seem to work in Edge, other browsers seem happy with it. I've also tried:
$(".js-drilldown-back:has a").addClass("click-back")
$(".js-drilldown-back:has > a").addClass("click-back")
$(".js-drilldown-back a").addClass("click-back")
$(".js-drilldown-back > a").addClass("click-back")
What I'm trying to achieve is when you click the Back button it removes a class from the body tag, ie:
$(".click-back").click(function(){
$("#page").removeClass("submenu-open")
})
Targetting the parent (.js-drilldown-back) doesn't seem to work which is why I'm trying to add the class to the child and target this instead.
1 answers
Answer question0
You don't appear to have proper semicolon terminations after each statement.
$(".js-drilldown-back").children("a").addClass("click-back");
:first-child seems to work fine in Edge, or maybe the console.log in jsfiddle is being lenient? I also reworked how you're applying your on click event and confirmed that it removes the class from the anchor.
$(".js-drilldown-back:first-child").addClass("click-back");
console.log( $(".js-drilldown-back:first-child").hasClass("click-back") );
$(document).on("click", ".click-back", function(){
$(this).removeClass("click-back");
})
Console confirms that the anchor has the desired class, i.e., :first-child is working.
Upon clicking the anchor, source confirms that the class is removed. I changed the target just to confirm it was removing something I could see and verify.
All tested in Edge here: https://jsfiddle.net/8bfo9cza/