How to traverse such a dom and make a match?

<div class="house">
            <img class="house-model" src="<?php echo Yii::app()->baseUrl;?>/images/home/new/home-user-scene.png">
            <a class="hight-light lever" data-item="Lever" style="left:26%;top:45%;"></a>
            <a class="hight-light lever" data-item="Lever" style="left:35%;top:54%;"></a>
            <a class="hight-light lever" data-item="Lever" style="left:58%;top:46%;"></a>
            <a class="hight-light lever" data-item="Lever" style="left:26%;top:76%;"></a>
            <a class="hight-light deadbolt" data-item="Deadbolt" style="left:42%;top:72%;"></a>
            <a class="hight-light lever-deadbolt" data-item="Lever + Deadbolt" style="left:78%;top:76%;"></a>
            <a class="hight-light wifi-adaptor" data-item="WiFi Adaptor" style="left:71%;top:81%;"></a>
            <!---->
            <div class="scene-time">
                <div class="scene-time-menu-title">
                    <span class="icon icon-utec-lock-ul3 icon-blue icon-20"></span>
                    <span class="scene-menu font-16">Smart Lock</span>
                </div>
                <ul class="time-warp">
                    <li class="item-time"><b class="dot"></b><span class="scene-name">Lever</span></li>
                    <li class="item-time"><b class="dot"></b><span class="scene-name">Deadbolt</span></li>
                    <li class="item-time"><b class="dot"></b><span class="scene-name">Lever + Deadbolt</span></li>
                    <li class="item-time"><b class="dot"></b><span class="scene-name">WiFi Adaptor</span></li>
                </ul>
            </div>
</div>

is to write an animation, that is, to add class, it feels very simple, but I can"t write it out.

clipboard.png

my idea is to slide across one of the timeline on the right, match the blue dot on the left, and then add a class.
to the matching blue dot (I added a custom attribute data-item for each blue dot). This is what I wrote:

       $(".scene-time").on("hover",".item-time",function(){
            var sceneName = $(this).children().text();//
            var dataItem = $(this).closet("a.hight-light").attr("data-item");//data-item
            if(sceneName == dataItem){
                ...
            }else{
                ...
            }
        })

but now this dataItem cannot be taken. Do you need to traverse this blue dot?
how to write it?

correct answer:

        $(".scene-time").on("hover",".item-time",function(){
            var sceneName = $(this).children().text();
            var dataItem;
            $("a.hight-light").map(function(){
                dataItem = $(this).attr("data-item");
                console.log(dataItem);
                if(sceneName == dataItem){
                    $(this).addClass("aa");
                }
            })
        });
Jun.21,2021

if you want to think about it, you should also need to traverse the blue dot to match the current timeline

var dataItem = $(this). Closet ('a. Hightlight'). Attr ('data-item');
changed to

$('a.hight-light').map(function(){
    var dataItem = $(this).attr('data-item');
    if(sceneName == dataItem){
        ...
    }else{
        ...
    }
})
Menu