Question

我的HTML如下：

<div class="row side cards-row-1 cards-row">
    <a href="#" class="card cards-front"> Text </a>
</div>

<div class="row side cards-row-2 cards-row">
    <a href="#" class="card cards-front"> Text </a>
</div>

<div class="row side cards-row-3 cards-row">
    <a href="#" class="card cards-front"> Text </a>
</div>

当用户点击链接时，我需要获取卡片行的数字值。

我认为最好的方法是使用Jquery parent选择器和wildcard选择器。

这是我的Jquery代码：

(function($) {
    $(document).ready(function() {
        "use strict";
        $('.cards-front').click(function(e) {
            e.preventDefault();
            $('.cards-row').removeClass('cards-expand');
            var classes = $(this).parent().attr("[class^=card-row-]");
            alert(classes);
            $(this).parent().addClass('cards-expand');
            $(this).insertAfter('<div class="cards-shadow"></div>');
        });

        $('.cards-back .close').click(function() {
            $('.cards-row').removeClass('cards-expand');
            $('.cards-shadow').remove();
        });

    });

})(jQuery);

我正在使用alert classes来检查已捕获的号码。但是，它不是捕获值，而是只显示undefined

I have a JS Fiddle here.

我不确定我做错了什么，并会感激任何指针。谢谢！

Answer 1

你的选择器错了，如果要检索类名，你需要这样做：

var classes = $(this).parent().attr("class");

如果您只想获取cards-row-之后的数字，而不是字母，那么您可以使用此正则表达式：

var classes = $(this).parent().attr("class").match(/cards-row-(\d+)/);

但实际上，在这种情况下你可以使用index()：

var classes = $(this).parent().index() + 1;

由于index()值基于0，因此您需要将其增加1才能获得正确的值

<强> Updated Fiddle

Answer 2

var classes = $(this).parent().attr("class").
        match(/cards-row-(\d)/)[1];

查看您的fiddle已修改。

Answer 3

更简单的方法是剥离字母并只留下数字

var classes = $(this).parent().attr('class').match(/\d+/g);

Jquery：使用通配符获取父级的类

3 个答案: