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

Question

我有一个元素

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

我想在row-. 在这种情况下，它将是 1。

到目前为止我的代码：

$(function() {
    $( ".item" ).click(function() {
      $('.detail-description-catcher').empty();
      $(this).find('.description').clone().appendTo('.detail-description-catcher').show();
    });
});

显示部分是一个空的 div：

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

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

有问题的部分是如何检测<div class="detail-description-catcher"><!-- --></div>代码部分的放置位置。

所以，我需要获取row-例如 row-1 或 row-2 的值，然后找到这个类的最后一次出现（这是在 php 中定义的，通常它在 4 个 solumns 后递增，但我需要在 jquery 中是动态的）和将 detail-description-catcher div 放在此元素之后。

知道怎么做吗？

Answer 1

尝试

$(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())
    });
});