如何从元素中获取第二个类名？答案

【问题标题】：How to get the second class name from element?如何从元素中获取第二个类名？
【发布时间】：2011-05-13 12:02:18
【问题描述】：

我正在尝试找出如何检索类属性的第二个类名。

例如，有：

<div class="something fooBar"></div>

如何获得名为“fooBar”的第二个类？

^{我知道您可以添加、删除和检查特定类，但我找不到如何将第二个类检索到变量中的文档。}

【问题讨论】：

@user 你为什么要二等名，如果你想在二等上更改一些 css 属性仍然可以说 $('.8')
@gov，我正在使用第二个类名，因为我正在检索大量数据并且无法使用更多属性。
@user 你能解释的更清楚吗，只是我想知道你为什么需要所有的类名.... // 可能是我遗漏了什么。
记住neither a class nor an id may start with a numeric character。
@david 但它可以以数值结尾，是吗？ @gov，当然。这是一个投票脚本。我已经投票了 UP 和 DOWN，UP 和 DOWN 是第二类，这样我就可以知道有人点击了哪个按钮。至于 ID 和 NAME 属性，我将它们用于其他用途。使用第二类为我修剪了一些多余的 HTML

标签： jquery class

【解决方案1】：

你可以像这样使用split：

alert($('#divID').attr('class').split(' ')[1]);

要获取所有课程，您可以这样做：

var classes = $('#divID').attr('class').split(' ');

for(var i=0; i<classes.length; i++){
  alert(classes[i]);
}

更多信息：

http://www.w3schools.com/jsref/jsref_split.asp

【讨论】：

@matt ，我真的很惊讶人们如此快速地提出解决方案，甚至还完成了代码输入，人们在这个堆栈溢出中简直太棒了。在 stackoverflow 中创建登录后，我完全没有在开发的任何地方陷入困境，在过去的 2 个月里我获得了很多知识。
几个月前我开始从事 UI 开发，过去我在后端和中间层编写了很多代码，这个网站让我的 UI 工作变得非常容易。我会更早加入的，但没问题。

【解决方案2】：

// alerts "8"
alert($('<div class="something 8"></div>').attr('class').split(' ')[1]);

【讨论】：

+1 也表示正确答案，虽然是的，我早于 15 秒 :)

【解决方案3】：

这就是通过引用 div ID 来实现的方法

$(document).ready( function () {
  alert($('#yourDivID').attr('class').split(' ')[1]);
});

split 函数将允许您使用指定的分隔符拆分字符串。这将返回一个包含分隔值的数组。在这种情况下将返回一个类名数组。

拆分其他字符串方法参考http://www.javascriptkit.com/javatutors/string4.shtml

您应该查看以下用于访问类的 jQuery 选择器和函数

选择器

http://api.jquery.com/class-selector/选择指定类的dom元素

http://api.jquery.com/has-selector/选择一个具有指定选择器的dom元素

功能

http://api.jquery.com/addClass/ 向 jQuery 对象添加类的方法

http://api.jquery.com/removeClass/ 方法将类移除到 jQuery 对象中

http://api.jquery.com/toggleClass/ 将类切换为 jQuery 对象的方法

http://api.jquery.com/hasClass/ 方法检查 jQuery 对象是否具有指定的类

http://api.jquery.com/attr/ 获取 jQuery 对象属性的方法

已编辑：Nice cheat sheet

【讨论】：

感谢您的参考！ +1
aah 需要 15 声望，抱歉，获得后会再试一次 :)
@user468312...欢迎您参考。这是一个不错的备忘单，您可以将其放在计算机附近labs.impulsestudios.ca/downloads/…

【解决方案4】：

可以获取class属性的值，在空间上拆分。

secondClass = element.className.split(' ')[1];

【讨论】：

【解决方案5】：

作为替代方案，使用 data-* html 属性来跟踪状态总是更好的做法，例如 $("div.example").data("active")

【讨论】：

好建议，有人（甚至是几个月后的编码员）冷淡地切换类的顺序或添加一个新的，因为在正常情况下不会有任何区别。

【解决方案6】：

这是不正确的。如果班级分隔了多个空格并且您获得了第二个班级，那么您将获得空缺。示例：

<div class="something   fooBar"></div>
var classes = $('div').attr('class').split(' ');
alert('classes: ' + classes + '; length: ' + classes.length );
// classes: something,,,fooBar; 4

我使用下一个代码：

/*
 *   el  - element
 *   num - class number
 */
function getNumClass(el, num) {

  var classes = el.split(' ');
  var newclasses = [];
  var ret;

  for (var i = 0; i < classes.length; i++) {

    ret = $.trim(classes[i]);
    if(ret.length > 0) {
      newclasses.length += 1;
      newclasses[newclasses.length-1] = ret;
    }
  }

  if (num > newclasses.length) return false;

  return newclasses[num - 1];
}

【讨论】：

更简单：var secondClass = $('div').attr('class').split( /\s+/ )[1];

【解决方案7】：

你可以像使用你的溢出一样

alert($('#divID').attr('class').split(' ')[1]);

那么你就可以这样做了

 var classes = $('#divID').attr('class').split(' ');

for(var i=0; i<classes.length; i++){
  alert(classes[i]);
}

来源javascript split string

【讨论】：