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

回答

相关问题