html 浏览dom结构等表格并突出显示每个元素

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 浏览dom结构等表格并突出显示每个元素相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        
        .row {
            overflow: hidden;
            margin-bottom: 5px;
        }
        
        .row > div {
            width: 25%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .row > div:nth-child(even) {
            background-color: #EEE;
        }
        
        .row > div:nth-child(odd) {
            background-color: #DDD;
        }
        
        .current {
            background-color: yellow !important;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="start">right</div>
        <div>down</div>
        <div>right</div>
        <div>down</div>
    </div>
    <div class="row">
        <div>left</div>
        <div>right</div>
        <div>up</div>
        <div>down</div>
    </div>
    <div class="row">
        <div>right</div>
        <div>down</div>
        <div>left</div>
        <div>left</div>
    </div>
    <div class="row">
        <div>down</div>
        <div>right</div>
        <div>right</div>
        <div>right</div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script type="text/javascript">
    'use strict';

    function pointer(currentElement) {

        currentElement.addClass('current');

        let parent = currentElement.parent();
        let nextElement;

        switch (currentElement.html()) {
            case 'right':
                nextElement = currentElement.next();
                break;
            case 'left':
                nextElement = currentElement.prev();
                break;
            case 'up':
                nextElement = parent
                    .prev()
                    .find(currentElement.prop('tagName'))
                    .eq(currentElement.index());
                break;
            case 'down':
                nextElement = parent
                    .next()
                    .find(currentElement.prop('tagName'))
                    .eq(currentElement.index());
                break;
        }

        setTimeout(() => {
            currentElement.removeClass('current');
            if (nextElement.length > 0) {
                pointer(nextElement);
            }
        }, 1500);
    }

    $(document).ready(() => {
        let startElement = $('.start');
        pointer(startElement);
    });
    </script>
</body>

</html>

以上是关于html 浏览dom结构等表格并突出显示每个元素的主要内容，如果未能解决你的问题，请参考以下文章