Javascript 如何获取单击元素的类值，并使用该值在jquery中最后一次出现该类之后放置一段html代码

我有一个元素

<div class="item cars column-2 row-1">
Mercedes
</div>

显示部分是一个空div：

<div class="detail-description-catcher"><!-- --></div>

我的目标是在单击后显示元素的描述。这没关系，我知道怎么做

问题在于如何检测将

代码部分放在何处

因此，我需要获取

行-

的值，例如第1行或第2行，然后找到这个类的最后一次出现的地方（这是在php中定义的，通常在4个solumns之后递增，但我需要在jquery中是动态的），并将详细描述catcher div放在这个元素之后。

知道怎么做吗？

试试看

$(function () {
    var $ddc = $('.detail-description-catcher');
    $(".item").click(function () {
        $ddc.empty();
        //here num will be 1
        var num = this.className.match(/row-(\d+)/)[1];
        $(this).find('.description').clone().appendTo($ddc).show();
        $ddc.insertAfter($('.item.row-' + num).last())
    });
});

演示：

也

$(function () {
    var $ddc = $('.detail-description-catcher');
    $(".item").click(function () {
        $ddc.empty();
        //here num will be 1
        var num = this.className.match(/row-(\d+)/)[1];
        $(this).find('.description').clone().appendTo($ddc).show();
        $ddc.insertAfter($('.item.row-' + num).last())
    });
});

$(function () {
    var $ddc = $('.detail-description-catcher');
    $(".item").click(function () {
        $ddc.empty();
        var clazz = this.className.match(/\b(row-\d+)\b/)[1];
        $(this).find('.description').clone().appendTo($ddc).show();
        $ddc.insertAfter($('.item.' + clazz).last())
    });
});