select neighboring divs with jquery

Question

I have the following html structure:

<div id="pixel_1" class="pixelarea"></div>
<div id="pixel_2" class="pixelarea"></div>
<div id="pixel_3" class="pixelarea"></div>

each div is 10px wide and 10px high. The whole surface is 102 divs wide and 200 divs high.(1020 pixel wide and 2000pixel high)

This is my jquery function:

    var getNumericPart = function(id) {
    var num = id.replace(/[^\d]+/, '');
    return num;
};

$('body').on('click','.pixelarea',function(e) {
    e.preventDefault();
    var id = getNumericPart($(this).attr('id')); //get only the number from the id
    var count = parseInt($("#selectedpixelsum").text());

        if($('#pixel_' +id).hasClass('selected')){
            $('#pixel_' +id).removeClass('selected');
            count--;
            $('#selectedpixelsum').html(count);
        }else{
            $('#pixel_' +id).addClass('selected');
            count++;
            $('#selectedpixelsum').html(count);
        }

});

How can I make sure that only adjacent divs can be selected? By this I mean the divs below, above and to the right and left of the selected divs.

Answer 1

Because you know the number of items per row (102), it is simple to use the elements index to allow or disallow selection.

Left of centre is index - 1
Right of centre is index + 1
Above centre is index - 102
Below centre is index + 102

Assumes that only neighbours of the first pixel selected may be selected:

 /* * Create pixel grid */ const $pixelsContainer = $('.pixels'); for (let i = 0; i < (102 * 5); i++) { $pixelsContainer.append('<div class="pixelarea" />'); } /* END Create pixel grid */ let selectedIndex = -1; $('.pixelarea').on('click', function() { const clickedIndex = $(this).index(); if (clickedIndex === selectedIndex) { /* * Primary selected element was clicked. Remove all selections; */ $('.pixelarea.selected').removeClass('selected'); selectedIndex = -1; return; } if (selectedIndex === -1) { /* * This is the primary selection */ selectedIndex = clickedIndex; $(this).addClass('selected'); } if (clickedIndex === selectedIndex - 1 || /* Left of primary */ clickedIndex === selectedIndex + 1 || /* Right of primary */ clickedIndex === selectedIndex - 102 || /* Above primary */ clickedIndex === selectedIndex + 102) { /* Below primary */ /* * Select / Deselect this element */ $(this).toggleClass('selected'); } });

 .pixels { display: flex; flex-wrap: wrap; width: 1020px; }.pixelarea { box-sizing: border-box; background: #f2f2f2; border: 1px solid #e6e6e6; width: 10px; height: 10px; }.pixelarea:hover { background: orange; }.pixelarea.selected { background: limegreen; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="pixels"></div>

---

Assumes neighbours of the last pixel selected can be selected:

 /* * Create pixel grid */ const $pixelsContainer = $('.pixels'); const columnCount = 102; const rowCount = 5; for (let i = 0; i < (columnCount * rowCount); i++) { $pixelsContainer.append('<div class="pixelarea" />'); } /* END Create pixel grid */ let selectedIndex = -1; $('.pixelarea').on('click', function() { const clickedIndex = $(this).index(); if (selectedIndex === -1) { /* * This is the first selection */ selectedIndex = clickedIndex; $(this).addClass('selected'); return; } if (clickedIndex === selectedIndex - 1 || clickedIndex === selectedIndex + 1 || clickedIndex === selectedIndex - columnCount || clickedIndex === selectedIndex + columnCount) { selectedIndex = $(this).index(); $(this).addClass('selected'); } });

 .pixels { display: flex; flex-wrap: wrap; width: 1020px; }.pixelarea { box-sizing: border-box; background: #f2f2f2; border: 1px solid #e6e6e6; width: 10px; height: 10px; }.pixelarea:hover { background: orange; }.pixelarea.selected { background: limegreen; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="pixels"></div>

---

Assumes neighbours of any selected pixel can be selected:

(Fixes selectable pixels from flowing on to incorrect rows)

 /* * Create pixel grid */ const $pixelsContainer = $('.pixels'); const columnCount = 102; const rowCount = 5; for (let i = 0; i < (columnCount * rowCount); i++) { $pixelsContainer.append('<div class="pixelarea" />'); } /* END Create pixel grid */ let selectedIndex = -1; $('.pixelarea').on('click', function() { const clickedIndex = $(this).index(); if (selectedIndex === -1) { /* * This is the first selection */ selectedIndex = clickedIndex; $(this).addClass('selected'); markAllowed(); return; } if ($(this).hasClass('allowed')) { selectedIndex = $(this).index(); $(this).addClass('selected'); markAllowed(); } }); function markAllowed() { const row = Math.floor(selectedIndex / columnCount) + 1; // Allow left if we haven't clicked the first element in the row if (selectedIndex - 1 > 0) { $('.pixelarea').eq(selectedIndex - 1).addClass('allowed'); } /* * Allow right if we haven't clicked the last element in the row */ if (((selectedIndex + 1) / row) < columnCount) { $('.pixelarea').eq(selectedIndex + 1).addClass('allowed'); } // Allow above if we haven't clicked in the first row if (row > 1) { $('.pixelarea').eq(selectedIndex - columnCount).addClass('allowed'); } // Allow below $('.pixelarea').eq(selectedIndex + columnCount).addClass('allowed'); }

 .pixels { display: flex; flex-wrap: wrap; width: 1020px; }.pixelarea { box-sizing: border-box; background: #f2f2f2; border: 1px solid #e6e6e6; width: 10px; height: 10px; }.pixelarea:hover { background: orange; }.pixelarea.selected { background: limegreen; }.allowed { background: lightGreen; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="pixels"></div>