Как получить data-attr за пределами div, где происходит событие jQuery?

Я использую слайдер совы, и у меня есть несколько слайдеров на одной странице для каждой категории видео. Итак, я добавил каждую категорию в блок div. Теперь на owl-next щелкните "Я хочу получить data-slug для выбранной категории". Вот что я пробовал, но он просто выбирает категорию первый, а не другие.

Note: If you have in mind that why not adding the data-categoryslug inside owl-next div so owl carousel does these things on initializatio i have no idea how to add it in there.

js:

// Получить следующие видео для Owl Carousal

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

HTML:

<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>

вам нужно получить все ползунки и добавить $ (это), это выберет выбранный

— 17.12.2018 08:43

// Get Next Videos for Owl Carousal         $('.blog-category-items .blog-slider .owl-next').click(function(e){             console.info($(this).closest('.group-heading').find('.cate-aj‌ax').data('slug'));             console.info($(this).closest('.ajax-cate').data('categoryslug‌'));             console.info($(this).closest('.ajax-cate').attr('data-categor‌yslug'));

Я пробовал все это, но ничего не получилось

— 17.12.2018 11:12

javascript jquery html

17.12.2018 08:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

102

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте этот код. Вам нужно связать элемент, который вы пытаетесь получить, с выбранным элементом, используя $(this), а затем parents(), чтобы перейти к родительскому тегу, а затем, наконец, использовать find().

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

Vimeo Не загружается, если возможно, для воспроизведения видео vimeo

— 14.02.2020 12:42

@CreativeEnemy: Задайте вопрос по проблеме.

— 15.02.2020 21:48

17.12.2018 12:31