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