Javascript 如何从选择器字符串添加类？_Javascript_Jquery_Css

Javascript 如何从选择器字符串添加类？

javascript jquery css

Javascript 如何从选择器字符串添加类？,javascript,jquery,css,Javascript,Jquery,Css,我有几个选择器形式的CSS类，例如.myclass.myclass2，我想将这两个类应用于一个元素我可以.split（）字符串，并使用.addClass（）应用每个类，但在此之前，我想知道是否有一个“本机”jQuery函数来执行此类操作，或者是否有人编写了一个函数来处理它为了更好地解释：我想要一个函数，我可以传递给它一个CSS选择器，它会将类添加到元素中。比如$（'#myelem'）.addClass（'.myclass.myclass'）（我也希望它能够处理其他CSS选择器，如#myid

我有几个选择器形式的CSS类，例如

.myclass.myclass2

，我想将这两个类应用于一个元素

我可以

.split（）

字符串，并使用

.addClass（）

应用每个类，但在此之前，我想知道是否有一个“本机”jQuery函数来执行此类操作，或者是否有人编写了一个函数来处理它

为了更好地解释：我想要一个函数，我可以传递给它一个CSS选择器，它会将类添加到元素中。比如

$（'#myelem'）.addClass（'.myclass.myclass'）

（我也希望它能够处理其他CSS选择器，如

#myid

，但我担心这要求太高，我可能需要一个完整的解析器函数。）

addClass

采用空格分隔的字符串，所以您只需将点替换为空格：

var classes = '.myclass.myclass2';
$(element).addClass(classes.replace(/\./g,' ').trim()))

addClass

采用空格分隔的字符串，因此您只需将点替换为空格：

var classes = '.myclass.myclass2';
$(element).addClass(classes.replace(/\./g,' ').trim()))

不能将css选择器（如

#elemid.myclass

）直接添加到原生

jQuery

中的元素中。下面的示例演示如何使用空格分隔的字符串添加多个类

$(elem).addClass("myclass mycalss2")

以及文件：

您不能将css选择器（如

#elemid.myclass

）直接添加到原生

jQuery

中的元素中。下面的示例演示如何使用空格分隔的字符串添加多个类

$(elem).addClass("myclass mycalss2")

以及文件：

在样式标记中创建两个类，如下所示

        .a {
       backgroud-color:red;
       }
     .b{
       color:blue; 
       }
      </style>

或

$（'#mydiv'）.addClass（a）；
$（#mydiv'）.addClass（b）；
});

这是html

          <html>
       <body>
                 <div id="mydiv"></div>
              </body>
                  </html>

在样式标记中创建两个类，如下所示

        .a {
       backgroud-color:red;
       }
     .b{
       color:blue; 
       }
      </style>

或

$（'#mydiv'）.addClass（a）；
$（#mydiv'）.addClass（b）；
});

这是html

          <html>
       <body>
                 <div id="mydiv"></div>
              </body>
                  </html>

您可以将其添加到脚本中：

$.fn.oldAddClass = $.fn.addClass;
$.fn.addClass = function(x){
    if(typeof x == 'string'){
        this.oldAddClass(x.replace(/\./g, ' '));
    }else{
        this.oldAddClass(x);
    }
}

然后用点调用

addClass（）

：

$(el).addClass('.class1.class2');

Fiddle:

您可以将其添加到脚本中：

$.fn.oldAddClass = $.fn.addClass;
$.fn.addClass = function(x){
    if(typeof x == 'string'){
        this.oldAddClass(x.replace(/\./g, ' '));
    }else{
        this.oldAddClass(x);
    }
}

然后用点调用

addClass（）

：

$(el).addClass('.class1.class2');

Fiddle:

一种更好的方法

.split（）

，所以如果需要，我会这样做。但我的问题是，是否有不这样做的方法。好吧，jQuery需要空格分隔的字符串。这就是你需要传递的格式。除非您从一开始就重复使用此格式，否则没有其他方法。需要有人编写一个库，该库接受选择器并将其分解为ID、类和选择器中可以使用的任何其他内容。为什么？jQuery已经这样做了，并返回了一组元素。我想你把这变成了一个XY问题。。。添加类与选择器没有任何关系，这就是为什么没有点，你基本上是这样做的：

element.className+=''+class

是的，我承认，我把它变成了一个XY问题。谢谢你帮助我认识到这一点。：）一种更好的方法是

.split（）

element.className+=''+class

是的，我承认，我把它变成了一个XY问题。谢谢你帮助我认识到这一点。：）我已经承认了这种可能的方法。我的问题是，如果不使用

.addClass（）

，我是否可以执行此操作。为什么不使用.addClass（）？它允许您在一个空格分隔的字符串中添加多个类。这意味着我必须将选择器字符串转换为空格分隔的字符串。如果有一种方法不这样做，我宁愿使用它。创建您的

addClass

版本真的没有意义。我不明白你的担心。这是jQuery决定使用的格式，因为点指的是选择器，而不是类名。这是有道理的。当您可以格式化字符串以供jQuery使用时，更改这种行为有什么意义呢？我已经承认了这种可能的方法。我的问题是，如果不使用

.addClass（）

addClass

版本真的没有意义。我不明白你的担心。这是jQuery决定使用的格式，因为点指的是选择器，而不是类名。这是有道理的。当您可以格式化字符串以供jQuery使用时，更改此行为的意义何在？这正是我想要的。我打赌，如果我扩展它，去掉任何ID标签或其他非类CSS选择器，它将是完美的。谢谢什么意思？与执行

addClass（'#id.class'）

时一样，它添加类

class

？到元素？是的。我还发现了一个bug：你需要

返回这个.oldAddClass（）

。哦，是的，我总是忘了返回它。下面是条带id的代码。对于dom元素，我可以删除它，尽管它会弄乱旧的addclass函数。这正是我想要的。我打赌，如果我扩展它，去掉任何ID标签或其他非类CSS选择器，它将是完美的。谢谢什么意思？与执行

addClass（'#id.class'）

时一样，它添加类

class

？到元素？是的。我还发现了一个bug：你