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

我想选择具有对象文字指示位置的元素。位置是唯一的，因此只会选择一个元素。

感谢您的回答。

Answer 1

我所能说的就是不要这样做！

如果您可以为div添加唯一的位置样式，则可以同时轻松添加标识符。

使用此标识符选择javascript中的元素，而不是css定位。

Answer 2

此处归功于原始海报;

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 3

您可以使用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>

Answer 4

使用

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

Answer 5

生成这些DIV时，请为其指定唯一的 id 属性。然后，您可以使用 id 属性检索DIV对象。

Answer 6

给他们一个类或id并使用class / id选择它们，它会快得多。否则你需要找到它们并按css值过滤。

Answer 7

你可以按照样式属性的内容选择元素（注意空格）：

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

Example

但是就像BonyT说的那样 - 你应该把这些值放到id或类中。

在样式属性中按CSS属性值选择HTML元素

7 个答案: