badwolfff
asked on
How do I remove a class from a parent element and apply it to a child using jQuery?
My auto-generated menu in wordpress has this kind of layout:
I would like it to be come:
Basically, I would like ANY class in the <li> parent that has initial part "cmsms-icon-" to be moved to child <a> tag.
thanks in advance
<li class="cmsms-icon-star-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-2542" id="menu-item-2542"><a href="http://demo.missionfamily.org/content/">ARTICOLI NUOVI</a></li>
<li class="cmsms-icon-wheelchair menu-item menu-item-type-post_type menu-item-object-page menu-item-2542" id="menu-item-2542"><a href="http://demo.missionfamily.org/content/">ARTICOLI NUOVI</a></li>
I would like it to be come:
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2542" id="menu-item-2542"><a class="cmsms-icon-star-1 " href="http://demo.missionfamily.org/content/">ARTICOLI NUOVI</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2542" id="menu-item-2542"><a class="cmsms-icon-wheelchair " href="http://demo.missionfamily.org/content/">ARTICOLI NUOVI</a></li>
Basically, I would like ANY class in the <li> parent that has initial part "cmsms-icon-" to be moved to child <a> tag.
thanks in advance
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The code searches for an element with a class that starts with cmsms-icon.
(A) For each one that it finds it calls removeClass to which it passes a function the return value of which is used by removeClass.
The function uses a regular expression to find an instance of any class starting with cmsms-icon. The first item in the returned array will be the entire matched string which will be the full matched class.
This class is added to the <a> elements of the matched class (in A above) and then returned to the removeClass so that it can be removed from the parent.
(A) For each one that it finds it calls removeClass to which it passes a function the return value of which is used by removeClass.
The function uses a regular expression to find an instance of any class starting with cmsms-icon. The first item in the returned array will be the entire matched string which will be the full matched class.
This class is added to the <a> elements of the matched class (in A above) and then returned to the removeClass so that it can be removed from the parent.
ASKER
Thanks for the explanation
I have a few more questions
How would read these in english?
A: (/(^|\s)
B: \S+/g)
C: || []
thanks
I have a few more questions
How would read these in english?
A: (/(^|\s)
B: \S+/g)
C: || []
thanks
A) Match from start of string (^) or a space - in hindsight I am not sure of my motivation for including those - it was a while back - and I suspect the solution would work without them.
B) \S+ match one or more non-space characters
C: || [] - || means OR [] is the empty array - the reason for this is we are using the return value from match to remove / add the found class - if it is not found it returns false i.e. does not return an array in which case target[0] will generate an error. We therefore are saying if the return value is not false then use the return value otherwise use the empty array so our target[0] is valid in the following lines. The OR statement will be evaluated on the basis of the first statement to be not false - so if an array is returned that is what will be used if false is returned the next expression is evaluated ([]) which is not false so it is then used in the assignment.
B) \S+ match one or more non-space characters
C: || [] - || means OR [] is the empty array - the reason for this is we are using the return value from match to remove / add the found class - if it is not found it returns false i.e. does not return an array in which case target[0] will generate an error. We therefore are saying if the return value is not false then use the return value otherwise use the empty array so our target[0] is valid in the following lines. The OR statement will be evaluated on the basis of the first statement to be not false - so if an array is returned that is what will be used if false is returned the next expression is evaluated ([]) which is not false so it is then used in the assignment.
ASKER
Lovely
Thanks :)
Thanks :)
ASKER
just a out of curiosity, since I am learning this stuff now, could you please explain a couple of bits of your code please?
function(i, cls)
cls.match(/(^|\s)cmsms-ico
thanks