jquery获取或找到动态CSS属性

问题描述：

我有一些css类应用于body，我想获得一个动态更改的特定类。所以，它是这样的：jquery获取或找到动态CSS属性

<body class="apple mango guava lime-1">

我想要得到的是1。

现在，lime-1可能会更改为lime-2另一次。所以，我想要的是搜索正文中所有CSS类的方法，然后检查lime-是否存在，并在连字符后获取下一个值。

我已经做到了这一点： var classes = $('body').attr('class');

感谢

如果可以，我建议你改变你的逻辑。而不是依赖于类中的元数据，将其添加为可直接读取的“data-*”属性，而不必通过应用的类名进行筛选 –

答

使用String#split，Array#forEach和String#match方法和做这样的事情。

var num; 
// get class attribute and split them into individual 
// and iterate 
$('body').attr('class').split(' ').forEach(function(v){ 
    // check for match 
    var m = v.match(/^lime-(\d+)$/); 
    // if matched get the captured value 
    if(m && m.length) 
    num = m[1]; 
}); 

console.log(num);

UPDATE：可以使用更好的正则表达式，使其更加简单。

var num; 
var m = $('body').attr('class').match(/\(?^|\s)lime-(\d+)(?:\s|$)/); 
// if matched get the captured value 
if(m && m.length) 
    num = m[1]; 

console.log(num);

感谢@Pranav，它的工作原理 – davexpression

@davexpression：很乐意提供帮助：） –

答

您可以得到该课程，然后切出您不想要的区域。当然，DIV你的情况将是body

$(document).ready(function() { 
 
var classes = $('div').attr('class'); 
 
alert(classes[classes.length -1]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="apple mango guava lime-1"><div> 
 

 
</div>

这将适用于示例中特定的一组类名，但OP已声明它们是动态的。如果课程是“苹果芒果foo-1番石榴”，这将如何工作？ –

@Rorry如果最后一部分是唯一改变的东西，这个解决方案就可以工作。 –

@Rory McCrossan会改变它的工作？ –

答

$("[class|='lime']").attr("class").slice(-1);

6.3. Attribute selectors

[att|=val]

代表与ATT属性的元素，它的值EIT她是正好“val”或以“val”开头，紧接着是“ - ” （U + 002D）。这主要是为了允许在BCP 47（[BCP47]）或其后继中描述的语言子代码匹配（例如，HTML中a元素上的hreflang属性）。对于lang（或xml：lang）语言的子码匹配，请参阅：lang伪类。

jquery获取或找到动态CSS属性

相关推荐