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

就像

一样简单

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

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

Answer 2

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

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

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

Answer 3

作为替代方案，HTML5支持这些称为“数据属性”的东西，它们专门用于将数据附加到DOM而不会滥用“class”或“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 Demo

jQuery，只选择id中的数字，如“article-23”

5 个答案: