Javascript 如何在发生事件的div外部获取数据attr jQuery？

我使用的是owl滑块，每个视频类别在一个页面上有多个滑块。因此，我已经在一个div中添加了每个类别slug。现在在owl下一次单击中，我想获取已单击类别的数据slug。这是我尝试过的，但它只获取第一个类别，而不是其他类别

注意：如果您想知道，为什么不在owl next div中添加数据categoryslug，以便owl carousel执行这些操作 关于初始化的事情我不知道如何添加它

js:

//获取猫头鹰狂欢节的下一个视频

        $('.blog-groups .blog-slider .owl-nav .owl-next').click(function(e){
            var categorySlug = $('.ajax-cate').data('categoryslug');
            console.log(categorySlug);
         });

HTML:

---

试试这个代码。您需要使用$this将您试图获取的元素与单击的元素相关联，然后使用parents转到parent标记，最后使用find

---

您需要获取所有滑块并添加$this，这将为Owl Carousal$'选择单击的一个//获取下一个视频。博客类别项目。博客滑块。Owl Next'。单击函数E{console.log$this.closest'.group heading'.find'.cate ajax'.data'slug'；console.log$this.closest'.ajax cate'.attr'data-categoryslug'；我尝试了所有这些，但如果可能的话，没有加载nullVimeo来播放vimeoVideos@CreativeEnemy：向某人发问r这个问题。

<div class="blog-groups">
    <div class="group-heading">

        <div class="blog-slider owl-lg-dot mb-none owl-theme owl-loaded owl-carousel owl-carousel-init" id="videoList">

            <div class="owl-controls">
                <div class="owl-nav">
                    <div class="owl-prev" style="display: block;">
                    </div>
                    <div class="owl-next" style=""></div>
                </div>
            </div>

        </div>
        <div class="group-seemore">
            <a class="ajax-cate" data-categoryslug="slug-is-here" href="/blog/category/slug-is-here" title="">
                See more
            </a>
        </div>

    </div>
</div>

$('.owl-next').on('click', function() { 
    var categorySlug = $(this).parents('.blog-groups').find('.ajax-cate').data('categoryslug');
    console.log(categorySlug);
});