jquery - toggleClass on separate child elements -
I am using the toggleclass method in a function like this:
JS < / Strong>
$ ('section .handle'). Click (function () {$ ('section h3 i'). ToggleClass ('rotate');});
HTML
& lt; Section & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; Div class = "handle cleanfix" & gt; & Lt; H3 & gt; Item A & lt; I class = "fa fa-arrow-down" & gt; & Lt; / I & gt; & Lt; / H3 & gt; & Lt; / Div & gt; & Lt; Ul class = "panel" & gt; & Lt; Li & gt; Larem ipsum & lt; / Li & gt; & Lt; Li & gt; Larem ipsum & lt; / Li & gt; & Lt; Li & gt; Larem ipsum & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Section & gt; & Lt; Section & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; Div class = "handle cleanfix" & gt; & Lt; H3 & gt; Item two & lt; I class = "fa fa-arrow-down" & gt; & Lt; / I & gt; & Lt; / H3 & gt; & Lt; / Div & gt; & Lt; Ul class = "panel" & gt; & Lt; Li & gt; Larem ipsum & lt; / Li & gt; & Lt; Li & gt; Larem ipsum & lt; / Li & gt; & Lt; Li & gt; Larem ipsum & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Section & gt;
The problem now is that I have many "I" elements and I need a square on every single element, whereas it seems that the classes are toggled to all of them.
Use this
in the context of & Lt; I & gt; Inside
$ ('section .handle'). Click (function () {$ ("i", this) .toggleClass ('rotate');});