Question

这是我的情况，

我有一些列表类，其中包含以下属性：

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

我希望变量能够选择以icon-开头的类用于某些特定目的（将此类克隆到子元素）。

对于varbla选择以icon-开头的类，我尝试了多种解决方案，包括：

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

似乎不起作用......

任何人都有任何解决方案吗？它会很可爱。

非常感谢

---编辑 -

该变量似乎可以在我的控制台上运行，但是在调用它时似乎不起作用。

我想要做的是从具有icon-的父项中删除所有类，并将此icon-类克隆到每个列表项的子元素。

Html如下所示：

<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>

要做到这一点然后我有我的变量：

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

我试图使用下面的内容删除以icon-frmo开头的类并将其复制到其子代中：

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

到目前为止没有成功......

非常感谢任何帮助！

Answer 1

没有快速解决此问题 - 您必须基本解析父li元素的类名，将相关元素添加到子a元素，然后将其从li。

对于这个例子，我把类名修剪成更容易阅读的东西。

＆＃13;

// 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"));
});

＆＃13;

<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>

＆＃13;

使用带有前缀的类的变量将其删除

1 个答案: