jquery - Jquery：使用通配符获取父类

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父选择器和通配符选择器。

这是我的 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

我这里有一个 JS Fiddle。

我不确定我做错了什么，并希望得到任何指示。谢谢！

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 以获得正确的值

更新小提琴

Answer 2

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

查看您的小提琴已编辑。

Answer 3

更简单的方法是去掉字母，只留下数字

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