選擇HTML元素

我有HTML這樣的：選擇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 };

我想選擇與元素定位對象字面值。職位是唯一的，所以只會選擇一個元素。

謝謝你的回答。

來源

2011-07-26 Darkry

你可以在這裏創建一個自定義選擇器是一個SO鏈接，它將幫助http://stackoverflow.com/questions/1180067/jquery-find-by-inline-css-attribute/1180106#1180106 – Rafay

你也可以使用' .filter'來實現自己的過濾（在'.filter'中使用'.css'）。 – pimvdb

我在帖子中發佈了正確的解決方案+ jsfiddle示例。 – zatatatata

這裏的信用轉到原始海報;

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')");

來源

2011-07-26 10:21:14

這個解決方案的工作原理是，我選擇它作爲接受的答案，但在我的問題中，我最終使用了id。 – Darkry

我只能說不要這樣做！

如果您可以爲div添加獨特的位置樣式，則可以同時輕鬆地添加標識符。

使用此標識符選擇javascript中的元素，而不是css定位。

來源

2011-07-26 10:17:09 BonyT

好的。當然，我可以做到這一點，我只是想問，是否有任何可能性如何與CSS值做到這一點。 – Darkry

但你爲什麼要？ CSS是爲了造型元素，而不是識別它們！如果你把這兩種混在一起，就會造成潛在的維護噩夢！ – BonyT

我能明白爲什麼，如果這是某種遊戲呢？動態創建了數百個元素。預先爲每個位置創建一個單獨的CSS類是沒有意義的。那麼你將不得不以某種方式選擇單個元素。我已經提出了一種使用jQuery開箱即用的方法。 – knut

使用

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; 
    }); 
}

見jsfiddle sample

來源

2011-07-26 10:17:47 zatatatata

當你產生這些DIV，具有獨特的ID屬性爲它們分配。然後，您可以使用ID屬性檢索DIV對象。

來源

2011-07-26 10:18:42 Raptor

給他們一個類或ID，並選擇他們使用類/ ID，它會快得多。否則，你需要找到它們並按css值過濾。

來源

2011-07-26 10:21:11

你可以用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>

建議的選擇器不起作用。

您還可以使用我的示例代碼將其他CSS屬性添加到style屬性，順序無關緊要。這裏有一個例子：

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

來源

2011-07-26 10:30:24 knut

你可以通過style屬性的內容中選擇元素（注意空格）：

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

Example。

但像BonyT說 - 你應該情願把這個值放入一個id或類。

來源

2011-07-26 10:46:02 Litek

回答

相關問題