Question

When I click with my left-button it should works like the image below.

But instead, my code is doing this.

I made an example (see the fiddle below). As you can see in the image, my current problem is:

All the above and below (not only the first row) are changing too.

In my fiddle example, I’m using .css('background-color', 'red') to test it.

Here is my fiddle.

I gathered information in those two posts.

• jQuery x y document coordinates of DOM object
• jQuery: get elements above a given ‘y’ position

Answer 1

Dont know what you rally want but try this:

$.expr[':'].xy = function (obj, index, meta, stack) {
    var xy = meta[3].split(',');
    var x = xy[0];
    var y = xy[1];
    var el = $(obj);
    var el_offset = el.offset();
    return el_offset.left == y && (el_offset.top-el.height() == x || el_offset.top+el.height() == x);
}

working example

UPDATE:

hmm you can select all of them like this:

$.expr[':'].xy = function (obj, index, meta, stack) {
    var xy = meta[3].split(',');
    var y = xy[0];
    var x = xy[1];
    var el = $(obj);
    var el_offset = el.offset();
    // check for top and bottom 3 blocks
    if ((el_offset.top-el.height() == y || el_offset.top+el.height() == y) &&  (el_offset.left+el.width() == x || el_offset.left == x || el_offset.left-el.width() == x))
        return true;
    // left and right
    else if (el_offset.top == y && (el_offset.left+el.width() == x || el_offset.left-el.width() == x))
        return true;

    return false;
}

and then do like this:

$(document).ready(function myfunction() {

    $('.content').on("click", function () {
        var obj_left = $(this).offset().left;
        var obj_top = $(this).offset().top;

        $('#wrap').find('.content:xy(' + obj_top + ',' + obj_left + ')').css('background-color', 'red');
    });

});