use variable for class starting with a prefix to remove it

Question

Here is my situation,

I have some list class with the below attributes:

icon-search-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-188

I'd like a variable to be able to select class starting with icon- for some specfific purposes ( cloning this class to the child element).

For the variabla to select the class starting with icon- I have try multiple solution including:

 var prefix_icon = $("div[class^='icon-'],div[class*=' icon-']")

which doesn't seem to works...

does any one have any solutions by any chance ? it will be lovely.

Thanks a lot

--- EDIT --

The variable seems to work on my console, waht does not seems to work is when calling it.

What im trying to do is to remove all classes from the parent item having icon-, and cloning this icon- class to the child element of each list item.

The Html is like below:

<ul id="menu-fly-out" class="drawer">
 <li id="menu-item-188" class="icon-search-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-188"> .       <a href="#" class="icon-search-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-188 icon-basket-icon menu-item-179">&nbsp;</a>
</li>
<li id="menu-item-189" class="icon-search-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-189"> .   <a href="#" class="icon-search-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-188 icon-basket-icon menu-item-179">&nbsp;</a>
</li>
<li id="menu-item-190" class="icon-search-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-190"> .   <a href="#" class="icon-search-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-188 icon-basket-icon menu-item-179">&nbsp;</a>
</li>
</ul>

to do that then i have the my variable:

 var prefix_icon = $("drawer > li[class^='icon-'],drawer > li[class*=' icon-']");

and I"m trying to use the below to remove the class starting with icon- frmo the parent and copying into its child:

$('.drawer > li > a').each(function () {
        $('.drawer > li').removeClass(prefix_icon),
        $(this).addClass(prefix_icon)
      }),

Without success so far...

Really appreciate any helps !

That answer is correct, so there's something else causing your problem. Just open the console and enter `$("div[class^='icon-'],div[class*=' icon-']")` — Reinstate Monica Cellio, Mar 26 '18 at 09:18
hmm thanks Archer, Should I replace div by a specific div ? It doenst seems to change anything to me — thibaultlgd, Mar 26 '18 at 09:20
im getting this: a.fn.init [selector: "drawer > li[class^='icon-'],drawer > li[class*=' icon-']", prevObject: n.fn.init(1), context: document] ( i have change div by the specific i want this to happen) — thibaultlgd, Mar 26 '18 at 09:23
If you just want *everything* that matches the class name criteria, then use `$("[class^='icon-'],[class*=' icon-']")`. I don't see what your problem is as you've not said what you're actually trying to get and why your above result is incorrect. — Reinstate Monica Cellio, Mar 26 '18 at 09:25
Okay, you've misunderstood what the selector is doing. It returns the *elements* that have those matching class names. It doesn't return the class names themselves. I'll put something together in an answer for you. — Reinstate Monica Cellio, Mar 26 '18 at 09:35

score 0 · Accepted Answer · answered Mar 26 '18 at 09:46

There's no quick fix for this - you have to basically parse the class names of the parent li element, add the relevant ones to the child a element and then remove them from the li.

I trimmed the class names down to something easier to read, for this example.

// find all the list item elements that match the given selector...
var $iconListItems = $("ul.drawer > li[class^='icon-'], ul.drawer > li[class*=' icon-']");

// parse each list item, removing the classes that begin with "icon-" and adding them to the child link element...
$iconListItems.each(function() {
    // habit - keep a local reference to the jQuery object so we don't have to keep constructing it
    var $this = $(this);

    // find the first link inside this list item
    var $link = $(this).find("a").eq(0);

    // start at the end and work backwards to avoid indexing issues when we remove things
    for (var i = this.classList.length - 1; i >= 0; i--) {
        if (this.classList[i].indexOf("icon-") == 0) {
            // this class name begins with "icon-" so remove it and add it to the link (if it's not already there)
            $link.addClass(this.classList[i]);
            $this.removeClass(this.classList[i])
        }
    }

    console.log("item: " + $this.attr("class"));
    console.log("link: " + $link.attr("class"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu-fly-out" class="drawer">
    <li id="menu-item-188" class="icon-search-icon menu-item-188">
        <a href="#" class="menu-item-179">&nbsp;</a>
    </li>
    <li id="menu-item-189" class="icon-something-else-icon menu-item-189">
        <a href="#" class="menu-item-180">&nbsp;</a>
    </li>
    <li id="menu-item-190" class="menu-item-190 icon-more-icons-icon">
        <a href="#" class="menu-item-181">&nbsp;</a>
    </li>
</ul>

No worries - happy to help :) – Reinstate Monica Cellio Mar 26 '18 at 09:54 — Reinstate Monica Cellio, Mar 26 '18 at 09:54

use variable for class starting with a prefix to remove it

1 Answers1