javascript - jQuery，仅从 id 中选择数字，例如“article-23”

Question

好吧，我有一个 div 标签，它有一个class="blog-post"和 id 类似的id="article-23"（其中“23”可以是任何数字，因为它是数据库中博客文章的 id）。我需要以某种方式从该 id 中获取一个数字，而不是对该 div 标签应用一些规则。所以说：

if number from id % 2 == 0 {
  set text colour black to associated div tag with class of blog-post
} else {
  set text colour white to associated div tag with class of blog-post
}

这只是一个“伪”代码，用于显示如果来自 id 的数字是偶数或奇数，我不想应用依赖的逻辑，但问题仍然相同，我如何从 id 中获取数字，如“article-23”？

Answer 1

您实际上可以通过函数应用规则，这使得这是最干净的解决方案（在我看来）：

$(".blog-post").css('color', function () {
    return +this.id.replace('article-', '') % 2 ? 'blue' : 'red';
});

http://jsfiddle.net/ExplosionPIlls/Jrc5u/

Answer 2

简单到

var number = "article-23".match(/\d+/)[0];

但是你必须确保字符串中存在任何数字，否则你会得到一个错误。

Answer 3

作为替代方案，HTML5 支持这些称为“数据属性”的东西，它们专门用于将数据附加到您的 DOM，而不会滥用诸如“类”或“id”属性之类的东西。jQuery 提供了一种方便的.data方法来以更明显的方式读取这些属性。

您可以使用“data-id”之类的内容添加自己的数字 ID 属性：

<div class="blog-post" data-id="23" />

$("#blog-post").each(function () {
  console.log($(this).data("id")); // Look up the data-id attribute
});

Answer 4

如果我理解正确，您需要 .blog-post 类的 id 标签的连字符后的数字。

var article = $(".blog-post").attr('id'); //get the id
var article = article.split("-");  // split it on hyphens
return article = article[article.length-1];  // return the last element 

Answer 5

尝试这个：

$('.blog-post[id^="article-"]').each(function () {
    if (parseInt(this.id.replace('article-', '')) % 2 === 0) {
        $('#' + this.id).css('color', 'black');
    } else {
        $('#' + this.id).css('color', 'white');
    }
});

jsFiddle 演示