選択HTML要素

Question

私はこのようなHTMLを持っている：

… 
<div style="top: 252px; left: 54px;"></div> 
<div style="top: 252px; left: 162px;"></div> 
<div style="top: 288px; left: 108px;"></div> 
… 

私はこのようなリテラルJavaScriptのオブジェクトがあります。

var pos = { top: 252, left: 54 }; 

を私が持つ要素を選択しますオブジェクトリテラルが示す位置。位置はユニークなので、1つの要素だけが選択されます。

ありがとうございました。

Answer 1

クレジットは元のポスターになります。

jQuery find by inline css attribute

関数 'はstyleEquals' であり、以下のように実施することができます。

jQuery.extend(jQuery.expr[':'], { 
    styleEquals: function(a, i, m){ 
     var styles = $(a).attr("style").split(" ") 
     var found = false; 
     for (var i = 0; i < styles.length; i++) { 
       if (styles[i]===m[3]) { 
         found = true; 
         break; 
       } 
     } 
     return found; 
    } 
}); 

次のような新しいjquery拡張機能を使用して、スタイル属性値で要素を検索できます。

$("div:styleEquals('top=252px'):styleEquals('left:54px')"); 

Answer 2

私が言うことができるのはこれをしないことです！

divにユニークな位置スタイルを追加できる場合は、同時に簡単に識別子を追加できます。

この識別子を使用して、CSSの配置ではなく、JavaScriptの要素を選択します。

Answer 3

使用

function findElement (top, left) { 
    return target = $('div').filter(function() { 
     var div = $(this); 
     if (parseInt(div.css('top')) == top && parseInt(div.css('left')) == left) 
      return true; 
     return false; 
    }); 
} 

あなたはこれらのDIVを生成すると、jsfiddle sample

Answer 4

を参照してくださいユニークのid属性でそれらを割り当てます。次に、id属性を持つDIVオブジェクトを取得できます。

Answer 5

クラスまたはIDを指定し、class/idを使用して選択すると、はるかに高速になります。それ以外の場合は、すべてを見つけてCSS値でフィルタリングする必要があります。

Answer 6

あなたは箱から出してthe jQuery JavaScript libraryと、このようにそれを行うことができます。

var pos = { top: 252, left: 54 }; 
$('div[style*="top: ' + pos.top + 'px"][style*="left: ' + pos.left + 'px"]'); 

あなたは一貫して空白を使用して確認する必要があります。次のように入力した場合：

<div style="top:252px; left:54px;"></div> 

提案されたセレクタは機能しません。

例のコードを使用してstyle属性に他のCSSプロパティを追加することもできますが、順序は関係ありません。

<div style="left: 54px; background: gray; top: 252px;"></div> 

Answer 7

あなたは（スペースに注意を払う）スタイル属性の内容によって要素を選択することができます：

$('div[style*="top: 252px; left: 54px"]').css("color","red") 

Exampleここでは一例です。

しかしBonyTのように、値をidやクラスに入れるべきです。