Question

如果我有元素：

<div>
     <div class="foo bar" data-id="12345"></div>
     <div class="foo bar" data-id="678"></div>
     <div class="foo bar" data-id="910"></div>
</div>

如何使用data-id="12345"和class="foo bar"获取元素？

由于

Answer 1

您可以使用：

$('[data-id=12345].foo.bar').css('color', 'peru');

http://jsfiddle.net/LBqhP/1/

Answer 2

试试这个

$("div.foo.bar[data-id='12345']");

Answer 3

如果您想访问包含class='foo bar'和data-id=12345

的div

var element = $("div.foo.bar[data-id=12345]");

如果您只想访问具有class =＆＃39; foo bar＆＃39;的第一个div元素。：

var element =  $("div.foo.bar:nth-child(1)");

Answer 4

链接类选择器，然后根据数据参数进行过滤：

$(function() {
    $("div.foo.bar").filter(function() {
        return $(this).data("id") == "12345";
    });
});

jsFiddle Demo
您还可以轻松地将此逻辑包装到可重用且可扩展的函数中：

function getDivWithDataId(id) {
    return $("div.foo.bar").filter(function() {
        return $(this).data("id") == id;
    });
}

返回与相关div元素匹配的jQuery集合。

您可以扩展它以包含类（通过传递类数组，如['foo','bar']）：

function getDivWithDataId(id, classes) {
    return $("div").filter(function() {
        var $self = $(this);
        var classMatch = true;

        $.each(classes, function(idx, val) {
            if (!$self.is(val)) classMatch = false;
        }

        return $(this).data("id") == id && classMatch;
    });
}

jquery按属性和类获取元素

4 个答案: