javascript - 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"and 获取元素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'and的 div data-id=12345：

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

如果您只想访问具有 class='foo bar' 的第一个 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;
    });
}