доступ к дочерним элементам div с помощью вкладки

Question

У меня есть следующие элементы div.

 <div class="color-picker-preview-control">
            <div class="color-picker-color-preview"></div>
            <div class="color-picker-hex-wrap">
                <label>{{colorpicker-dialog-hex-or-rgb-label}}</label>
                <input type="text" class="color-picker-color-hex">
            </div>
            <div class="eye-dropper">
                <div class="eye-dropper-button" title="{{colorpicker-dialog-eyedropper-title}}"></div>
            </div>
        </div>

        <div class="color-picker-gradient-wrap">
            <div class="color-picker-sl-field">
                <canvas class="color-picker-sl-gradient"></canvas>
                <canvas class="color-picker-sl-back hide"></canvas>
                <div class="color-field-handle sl-handle"><div class="dot"></div></div>
            </div>

            <div class="color-picker-slider">
                <canvas class="color-picker-gradient hue-gradient"></canvas>
                <div class="color-picker-handle hue-handle" data-part="hue"><div class="dot"></div></div>
            </div>
        </div>

Я хотел бы получить доступ к дочерним элементам элементов div и следующему элементу div с помощью табуляции. Как я могу сделать это, используя jquery или HTML?