How to copy the last class of element to another element in jQuery?

1
votes

I am trying to copy the last class of each element to their parent li element in jQuery.

This is the current markup:

<nav class="menu-uber-main-menu-container">

    <ul class="menu">

        <li class="menu-item menu-item-type-post_type menu-item-object-page page_item">
            <a href="#" class="">
                <i class="fa fa-shopping-cart fa-lg menu-basket"></i>
                <span>Home</span>
            </a>
        </li>


        <li class="menu-item menu-item-type-post_type menu-item-object-page page_item">
            <a href="#" class="">
                <i class="fa fa-line-chart fa-lg menu-chart"></i>
                <span>About</span>
            </a>
        </li>


        <li class="menu-item menu-item-type-post_type menu-item-object-page page_item">
            <a href="#" class="">
                <i class="fa fa-truck fa-lg menu-truck"></i>
                <span>Blog</span>
            </a>
        </li>


    </ul>

</nav>

I want to copy and pass menu-basket, menu-chart, menu-truck to their parent li class="menu-item menu-item-type-post_type menu-item-object-page page_item"

The result should be: 

    <ul class="menu">

        <li class="menu-item menu-item-type-post_type menu-item-object-page page_item menu-basket">
            <a href="#" class="">
                <i class="fa fa-shopping-cart fa-lg menu-basket"></i>
                <span>Home</span>
            </a>
        </li>


        <li class="menu-item menu-item-type-post_type menu-item-object-page page_item menu-chart">
            <a href="#" class="">
                <i class="fa fa-line-chart fa-lg menu-chart"></i>
                <span>About</span>
            </a>
        </li>


        <li class="menu-item menu-item-type-post_type menu-item-object-page page_item menu-truck">
            <a href="#" class="">
                <i class="fa fa-truck fa-lg menu-truck"></i>
                <span>Blog</span>
            </a>
        </li>


    </ul>

</nav>

The code for getting the last class of the element is this:

var lastClass = j('.menu-uber-main-menu-container > .menu > .menu-item > a > .fa').attr('class').split(' ').pop();

How to transfer each last class for each li element associatively?

1
javascriptjqueryhtmlcsswordpress
Isn't getting the last class in the source a bit fragile? – gcampbell
Have you tried .children() or .parent() with .addClass()? – AdamMcquiff
There's no such thing as the 'last class' on an element. They're stored in an arbitrary order, unless you want to start hacking around the class attribute value as a string - which isn't a great idea. – Rory McCrossan
I agree with @Rory McCrossan. If I were you I would search for the term "menu" in the class that you're grabbing as opposed to just grabbing the last class of the element because I don't think that will be consistent. – Josh

1 Answers

2
votes

you could use .each()

$('.menu-uber-main-menu-container > .menu > li').each(function(){
    var className = $(this).find('.fa').attr('class').split(' ').pop();
    $(this).addClass(className);
});