Question

我有一个像

这样的东西的清单

                    <ul>
                        <li>
                            <div class="pack1 active1"><span>$3.99</span></div>
                        </li>
                        <li>
                            <div class="pack2"><span>$5.99</span></div>
                        </li>
                        <li>
                            <div class="pack3 active3"><div id="ribbon"><span>40</span></div><span>$6.99</span></div>
                        </li>
                        <li>
                            <div class="pack4"><span>$10.99</span></div>
                        </li>
                        <li>
                            <div class="pack5"><span>$259.99</span></div>
                        </li>
                    </ul>

我希望在点击时删除所有活动的*类。我试图做$('*[class^="active"]').removeClass()之类的事情，但那是行不通的

任何帮助？

Answer 1

好的，我测试了它，即使有一个以上的“active-something”类分配给一个元素，这肯定有效：

$('[class*="active"]').removeClass(function(i, c) {
  return c.match(/active\d+/g).join(" ");
});

'i'是匹配元素的索引，'c'是匹配元素的class属性的值，因此您不需要再次“请求”它。 $（“”“）。removeClass（）可以删除值指定的所有类，因此如果有多个”active-something“类分配给此元素，我们将返回从调用到匹配的所有类（使用正则表达式末尾的'g'选项），然后连接它，以便实际的removeClass函数可以相应地处理它。

Answer 2

这样的事情可能会：

$('*[class~="active"]').removeClass(function() {
    var match = $(this).attr('class').match(/active\d{1,}/);
    return match ? match[0] : '';
});

基本上，您将返回匹配发现的类名

Answer 3

这是一个更好的实现：

    $('.my-selector').removeClass(function(i, c)
    {
        var matches = c.match(/\S*active\S*/g);
        return matches ? matches.join(' ') : false;
    });

Answer 4

尝试以下

$('[class~="active"]').removeClass();

~=语法匹配值包含指定单词的属性。文档

http://api.jquery.com/attribute-contains-word-selector/

问题中使用的^=语法匹配以指定文本开头的属性值。这似乎不是你想要的。

Answer 5

$('div[class^="active"]').click(function() {
    $(this).each(function() {
       $(this).removeClass();
    });
});

Answer 6

$('div[class*="active"]').removeClass(function() {
    return $(this).attr("class").match(/active\d{1}/).join(" ");
});

Answer 7

您的描述没有说明您要点击的内容;什么应该触发什么;或者你想如何对待不活跃的成员等等。所以...我会在功能上点缀一下。

您的所作所为取决于您对相关HTML的控制程度。但是从你的解释中无法真正确定这一点。但是，如果您想影响START WITH“active”的所有类，请使用我的示例事件定义：$（'div [class ^ =“active”]'）

与此同时，让我们假装你对所涉及的HTML有一些控制权。

这是一些值得思考的东西

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>

    <style type="text/css">
        .list li
        {
            cursor: pointer;
        }
        .active
        {
            color: Green;
        }
        .inactive
        {
            color: grey;
        }
    </style>

    <script type="text/javascript">

        ///<summary>Removes an active row.</summary>
        function deactivate() {
            $(this).parent().remove();
        }
        ///<summary>Change an inactive row to an active row.</summary>
        function activate() {
            $(this).removeClass('inactive').addClass('active').click(deactivate);
        }

        $(document).ready(function() {
            // Also, just as an extra, use "context" to limit the scope of any jQuery selector-search.
            // That way on large pages your selector doesn't search through the whole page,
            // it only searches the tables HTML.
            // Doing so is a short-cut for: $('#tblMyTable').find('tr.clickTrigger');
            var context = $('ul.list');

            $('div.inactive', context).click(activate);
            $('div.active', context).click(deactivate);
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
         <ul class="list">
            <li>
                <div class="pack1 active">
                    <span>$3.99</span>
                </div>
            </li>
            <li>
                <div class="pack2 inactive">
                    <span>$5.99</span>
                </div>
            </li>
            <li>
                <div class="pack3 active">
                    <div id="ribbon">
                        <span>40</span>&nbsp;@&nbsp;<span>$6.99</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="pack4 inactive">
                    <span>$10.99</span>
                </div>
            </li>
            <li>
                <div class="pack5 inactive">
                    <span>$259.99</span>
                </div>
            </li>
        </ul>
    </form>
</body>
</html>

Answer 8

有多少个active个班级？你可以做......

for (var x=1; x<=5; x++)
    $('.active' + x).removeClass('active' + x);

JSFiddle Live Demo

jquery删除匹配的类？

8 个答案: