Question

我有一个如下所示的div列表：

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

我在网格上有很多这些，并且作为我的填充算法的一部分，我想通过left和top选择相邻的网格作为我的x和y坐标。到目前为止，我似乎无法弄清楚如何让这个工作。有没有人建议如何做到这一点？

从stackoverflow问题我尝试了以下选择器：

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

我认为这很接近，但我收到了这个错误：

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: div['style=left: 0px; top:0px;']

Answer 1

如下：

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

或者如果您打算使用css值，您可以执行以下操作：

$(".blockattribute").filter(function(ind,el){return $(el).css("left") == your_value+"px" && $(el).css("top") == your_value2+"px"})

Answer 2

你选错了。实现此目的的一种方法是迭代divs并检查其left和top值。

＆＃13;

$(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'));
});

＆＃13;

.blockattribute {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
}

＆＃13;

<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>

＆＃13;

注意： 查看Evan的答案，该答案比此更清晰。

Answer 3

首先，您的代码$("div['style=left: 0px; top:0px;']");在语法上无效。它需要围绕属性值引用，如下所示：

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

话虽如此，它仍然无法获得理想的结果，因为您的内联样式必须完全匹配。

为了更接近你可以使用通配符属性选择器来获得这样的内联样式的一部分，虽然它真的很挑剔，因为单个空格会导致它失败。

$('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>

这里有更多内容：https://css-tricks.com/attribute-selectors/#rel-anywhere。

有没有办法可以通过它的css'left'和'top'属性找到div元素？

3 个答案: