jQuery按属性和类获取元素

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 ='foo bar'的div元素：

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

Answer 4

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

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

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

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