使用jQuery获取元素的类列表

17 回答

• 15

  我知道这是一个古老的问题但仍然存在 .

  <div id="specId" class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
  
  var className=".dolor_spec" //dynamic
  

  如果你想操纵元素

  $("#specId"+className).addClass('whatever');
  

  如果要检查元素是否具有类

  $("#specId"+className).length>0
  

  如果是多个 class

  //if you want to select ONE of the classes
  var classNames = ['.dolor_spec','.test','.test2']
  $("#specId"+classNames).addClass('whatever');
  $("#specId"+classNames).length>0
  //if you want to select all of the classes
  var result = {className: ""};
  classNames.forEach(function(el){this.className+=el;},result);
  var searchedElement= $("#specId"+result.className);
  searchedElement.addClass('whatever');
  searchedElement.length>0
  

  回复于 2024-04-20T20:58:07+08:00
• 7

  $('div').attr('class').split(' ').map(function(cls){ console.log(cls);})
  

  回复于 2024-04-20T20:58:07+08:00
• 654

  这可能对你有所帮助 . 我用这个函数来获取childern元素的类 .

  function getClickClicked(){
      var clickedElement=null;
      var classes = null;<--- this is array
      ELEMENT.on("click",function(e){//<-- where element can div,p span, or any id also a class
          clickedElement = $(e.target);
          classes = clickedElement.attr("class").split(" ");
          for(var i = 0; i<classes.length;i++){
              console.log(classes[i]);
          }
          e.preventDefault();
      });
  }
  

  在你的情况下，你想要doler_ipsum类你现在可以这样做 calsses[2]; .

  回复于 2024-04-20T20:58:07+08:00
• 119

  谢谢你 - 我遇到了类似的问题，因为我试图以编程的方式将对象与层级类名称相关联，即使这些名称可能不一定为我的脚本所知 .

  在我的脚本中，我希望 <a> 标签通过给出 <a> 标签 [some_class] 加上 toggle 类来打开/关闭帮助文本，然后给它的帮助文本 [some_class]_toggle 类 . 这段代码使用jQuery成功找到相关元素：

  $("a.toggle").toggle(function(){toggleHelp($(this), false);}, function(){toggleHelp($(this), true);});
  
  function toggleHelp(obj, mode){
      var classList = obj.attr('class').split(/\s+/);
      $.each( classList, function(index, item){
      if (item.indexOf("_toggle") > 0) {
         var targetClass = "." + item.replace("_toggle", "");
         if(mode===false){$(targetClass).removeClass("off");}
         else{$(targetClass).addClass("off");}
      }
      });
  }
  

  回复于 2024-04-20T20:58:07+08:00
• 235

  var classList = $(element).attr('class').split(/\s+/);
  $(classList).each(function(index){
  
       //do something
  
  });
  

  回复于 2024-04-20T20:58:07+08:00
• 5

  在这里，你只需调整 readsquare 的答案来返回所有类的数组：

  function classList(elem){
     var classList = elem.attr('class').split(/\s+/);
      var classes = new Array(classList.length);
      $.each( classList, function(index, item){
          classes[index] = item;
      });
  
      return classes;
  }
  

  将jQuery元素传递给函数，以便示例调用：

  var myClasses = classList($('#myElement'));
  

  回复于 2024-04-20T20:58:07+08:00
• 0

  Update:

  正如@Ryan Leonard正确指出的那样，我的回答并没有真正解决我自己的问题......你需要修剪并删除双重空格（例如）string.replace（/ / g，“”） . 或者您可以拆分el.className，然后使用（例如）arr.filter（Boolean）删除空值 .

  const classes = element.className.split(' ').filter(Boolean);
  

  或更现代

  const classes = element.classList;
  

  Old:

  有了所有给定的答案，你永远不应该忘记用户.trim（）（或$ .trim（））

  因为类被添加和删除，所以可能发生类字符串之间存在多个空格 . 例如， 'class1 class2 class3'..

  这会变成['class1'，'class2'，''，''，''，'class3'] ..

  当您使用修剪时，所有 multiple 空格都被删除..

  回复于 2024-04-20T20:58:07+08:00
• 57

  有点晚了，但是使用extend（）函数可以在任何元素上调用"hasClass()"，例如：
  var hasClass = $('#divId').hasClass('someClass');

  (function($) {
  $.extend({
      hasClass: new function(className) {
          var classAttr = $J(this).attr('class');
          if (classAttr != null && classAttr != undefined) {
              var classList = classAttr.split(/\s+/);
              for(var ix = 0, len = classList.length;ix < len;ix++) {
                  if (className === classList[ix]) {
                      return true;
                  }
              }
          }
          return false;
      }
  }); })(jQuery);
  

  回复于 2024-04-20T20:58:07+08:00
• -4

  为什么没有人简单列出 .

  $(element).attr("class").split(' ');
  

  回复于 2024-04-20T20:58:07+08:00
• 0

  在支持浏览器时，您可以使用DOM元素'classList属性 .

  $(element)[0].classList
  

  它是一个类似于数组的对象，列出了元素具有的所有类 .

  如果您需要支持不支持 classList 属性的旧浏览器版本，则链接的MDN页面还包含一个垫片 - 尽管即使垫片也不适用于IE 8以下的Internet Explorer版本 .

  回复于 2024-04-20T20:58:07+08:00
• -3

  对于图像类型的元素，我有类似的问题 . 我需要检查元素是否属于某个类 . 首先我试过：

  $('<img>').hasClass("nameOfMyClass");
  

  但我得到了一个很好的“这个功能不适用于这个元素” .

  然后我在DOM浏览器上检查了我的元素，我看到了一个非常好的属性，我可以使用：className . 它包含由空格分隔的元素的所有类的名称 .

  $('img').className // it contains "class1 class2 class3"
  

  一旦你得到这个，就像往常一样拆分字符串 .

  在我的情况下，这工作：

  var listOfClassesOfMyElement= $('img').className.split(" ");
  

  我假设这将适用于其他类型的元素（除了img） .

  希望能帮助到你 .

  回复于 2024-04-20T20:58:07+08:00
• -3

  问题是Jquery的目的是什么 .

  $('.dolor_spec').each(function(){ //do stuff
  

  为什么没有人给出.find()作为答案？

  $('div').find('.dolor_spec').each(function(){
    ..
  });
  

  非IE浏览器也有classList：

  if element.classList.contains("dolor_spec") {  //do stuff
  

  回复于 2024-04-20T20:58:07+08:00
• 3

  你应该尝试这个：

  $("selector").prop("classList")
  

  它返回元素的所有当前类的数组 .

  回复于 2024-04-20T20:58:07+08:00
• -4

  javascript为dom中的节点元素提供了classList属性 . 简单地使用

  element.classList
  

  将返回一个表单对象

  DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}
  

  该对象具有可以使用的包含，添加，删除等功能

  回复于 2024-04-20T20:58:07+08:00
• 2

  试试这个 . 这将为您提供文档所有元素的所有类的名称 .

  $(document).ready(function() {
  var currentHtml="";
  $('*').each(function() {
      if ($(this).hasClass('') === false) {
          var class_name = $(this).attr('class');
          if (class_name.match(/\s/g)){
              var newClasses= class_name.split(' ');
              for (var i = 0; i <= newClasses.length - 1; i++) {
                  if (currentHtml.indexOf(newClasses[i]) <0) {
                      currentHtml += "."+newClasses[i]+"<br>{<br><br>}<br>"
                  }
              }
          }
          else
          {
              if (currentHtml.indexOf(class_name) <0) {
                  currentHtml += "."+class_name+"<br>{<br><br>}<br>"
              }
          }
      }
      else
      {
          console.log("none");
      }
  });
  $("#Test").html(currentHtml);
  

  }）;

  这是工作示例：https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

  回复于 2024-04-20T20:58:07+08:00
• 1

  您可以使用 document.getElementById('divId').className.split(/\s+/); 获取一组类名 .

  然后你可以迭代并找到你想要的那个 .

  var classList = document.getElementById('divId').className.split(/\s+/);
  for (var i = 0; i < classList.length; i++) {
      if (classList[i] === 'someClass') {
          //do something
      }
  }
  

  jQuery在这里没有真正帮助你...

  var classList = $('#divId').attr('class').split(/\s+/);
  $.each(classList, function(index, item) {
      if (item === 'someClass') {
          //do something
      }
  });
  

  回复于 2024-04-20T20:58:07+08:00
• 136

  这是一个jQuery插件，它将返回匹配元素所具有的所有类的数组

  ;!(function ($) {
      $.fn.classes = function (callback) {
          var classes = [];
          $.each(this, function (i, v) {
              var splitClassName = v.className.split(/\s+/);
              for (var j = 0; j < splitClassName.length; j++) {
                  var className = splitClassName[j];
                  if (-1 === classes.indexOf(className)) {
                      classes.push(className);
                  }
              }
          });
          if ('function' === typeof callback) {
              for (var i in classes) {
                  callback(classes[i]);
              }
          }
          return classes;
      };
  })(jQuery);
  

  用它就好

  $('div').classes();
  

  在你的情况下返回

  ["Lorem", "ipsum", "dolor_spec", "sit", "amet"]
  

  您还可以将函数传递给要在每个类上调用的方法

  $('div').classes(
      function(c) {
          // do something with each class
      }
  );
  

  这是我设置的jsFiddle演示和测试http://jsfiddle.net/GD8Qn/8/

  缩小了Javascript

  ;!function(e){e.fn.classes=function(t){var n=[];e.each(this,function(e,t){var r=t.className.split(/\s+/);for(var i in r){var s=r[i];if(-1===n.indexOf(s)){n.push(s)}}});if("function"===typeof t){for(var r in n){t(n[r])}}return n}}(jQuery);
  

  回复于 2024-04-20T20:58:07+08:00