CSSの 'left'属性と 'top'属性の両方でdiv要素を見つける方法はありますか？

Question

私は以下のようになりdiv要素のリストを持っている：私は、グリッド上でこれらの束を持って、私のFLOODFILLアルゴリズムの一部として、私は私のようleftとtopによって隣接するグリッドを選択したい

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

をx座標とy座標。これまでのところ、私はこれをどのように動作させるかを理解できないようです。誰かがこれを達成する方法についての推奨を持っていますか？私はこれが近いと思いますが、私はこのエラーを取得する

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

：

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

Answer 1

まず、コード$("div['style=left: 0px; top:0px;']");は構文上無効です。言われていること

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

あなたのインラインスタイルが正確に一致する必要があろうから、それはまだあなたの望ましい結果を得ることはありません。これだけのような属性値の周りに引用符を必要とします。

もう少し近づけるには、ワイルドカード属性セレクタを使ってこのようなインラインスタイルの一部を得ることができますが、実際には非常に厄介であり、単一の空白がこれを失敗させるほどです。 https://css-tricks.com/attribute-selectors/#rel-anywhere：ここでは、この上もう少し

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

。

Answer 2

どのようなものについて：

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

私は次のセレクタを試してみましたstackoverflowの質問から

、またはCSS値の使用をご希望の場合は、

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

Answer 3

あなたはそれを間違って選択しています。これを達成する1つの方法は、divsを繰り返し、そのleftとtopの値を確認することです。

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

注：これよりクリーンなソリューションを持っているエヴァンの答えをチェックしてください。