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

debugcn 发表于 Dev

詹姆斯·普莱斯利

我有一个元素

<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放在此元素之后。

任何想法如何做到这一点？

阿伦·P·约翰尼（Arun P Johny）

尝试

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。