3

I have a list of div that look like this below:

<div class="blockattribute" id="1" style="background-color: rgb(217, 217, 217); left: 0px; top: 0px;"></div>

I have a bunch of these on a grid and as part of my floodfill algorithm, I want to select adjacent grids by left and top as my x and y coordinates. So far I can't seem to figure out how to get this to work. Does anyone have a recommendation as to how to accomplish this?

From a stackoverflow question I have tried the following selector:

$("div['style=left: 0px; top:0px;']");

I think this is close but I get this error:

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: div['style=left: 0px; top:0px;']
Dan Rubio
  • 4,709
  • 10
  • 49
  • 106
  • See if [this](http://stackoverflow.com/a/11396681/1627271) helps.. – choz Nov 02 '16 at 01:48
  • Hey @choz, thanks for the link but this is not quite what I'm looking for. I was able to get the information from the method and the result yielded this: `block1[0].getBoundingClientRect();` `ClientRect {top: 8, right: 306, bottom: 28, left: 286, width: 20…}` That's not exactly what I was going for because when I want to find adjacent square (right,left,top,bottom) I want to be able to just add pixels to to and left and grab the element from there. – Dan Rubio Nov 02 '16 at 02:03
  • I've added my answer but I'd suggest to go with Evan's one by using `filter` function since I think it's cleaner. – choz Nov 02 '16 at 02:05

3 Answers3

3

how about something like:

$(".blockattribute").filter(function(ind,el){return $(el).offset().left == your_value && $(el).offset().top == your_value})

or if you are intent on using css values, you can do something like:

$(".blockattribute").filter(function(ind,el){return $(el).css("left") == your_value+"px" && $(el).css("top") == your_value2+"px"})
Avi Mosseri
  • 1,258
  • 1
  • 18
  • 35
  • Hey Evan, I liked your answer but for the `your_value` part I tried placing a sample coordinate like `20` and `0` and I got an empty array. Also I tried `20px` and `0px' but still got nothing. Am I missing something? – Dan Rubio Nov 02 '16 at 02:14
  • `.offset().top` and `.offset().left` calculates the coordinates relative to the document. I think it would be better to use `.css('top')` and `.css('left')`. Since the OP is asking about the top and left css property values. – Cave Johnson Nov 02 '16 at 02:17
  • @KodosJohnson Personally, I'd rather use `offset()` than `css`. Since jquery implemented it by using `getBoundingClientRect` which I assume is the correct approach based on [this answer](http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element/11396681#11396681) – choz Nov 02 '16 at 02:23
  • @DanRubio offset is relative to the page, if you want css values, use .css() as KodosJohnson suggested – Avi Mosseri Nov 02 '16 at 03:06
2

You're selecting it wrong. One way to achieve this is to iterate the divs and check its left and top value.

$(function() {
  var selectDiv = function(left, top) {
    var $arrDiv = [];
    $('div.blockattribute').each(function(i, v) {
      var $div = $(v);
      $arrDiv.push($div);
    });

    for (var i = 0; i < $arrDiv.length; i++) {
      var $div = $arrDiv[i];
      var offset = $div.offset();
      if (offset.left === left && offset.top === top) {
        return $div;
      }
    }
    
    return null;
  }
  
  var $selectedDiv = selectDiv(20, 20);
  console.log($selectedDiv.attr('id'));
});
.blockattribute {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blockattribute" id="1" style="background-color: rgb(217, 217, 217); left: 0px; top: 0px;"></div>
<div class="blockattribute" id="2" style="background-color: rgb(17, 17, 17); left: 20px; top: 20px;"></div>
<div class="blockattribute" id="3" style="background-color: rgb(121, 121, 121); left: 40px; top: 40px;"></div>

Note: Check Evan's answer which has cleaner solution than this.

choz
  • 17,242
  • 4
  • 53
  • 73
-1

First off, your code $("div['style=left: 0px; top:0px;']"); is syntactically invalid. It needs quote around the attribute value only like this:

$('div[style="left: 0px; top:0px;"]');

That being said, it still won't get you the desired result since your inline style would have to match exactly.

To get a bit closer you can use wildcard attribute selector to get part of the inline style like this, though it's really going to be very finicky and so much as a single whitespace will cause this to fail.

$('div[style*="left: 0px; top: 0px"]').html('test345');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blockattribute" id="1" style="background-color: rgb(217, 217, 217); left: 0px; top: 0px;">test 123</div>

A bit more on this here: https://css-tricks.com/attribute-selectors/#rel-anywhere.

But those new buttons though..
  • 21,377
  • 10
  • 81
  • 108