jquery get element by attribute and class

Question

If I have an element:

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

How can I get the element with data-id="12345" and class="foo bar" ?

Thanks

Possible duplicate http://stackoverflow.com/questions/1944302/jquery-select-an-elements-class-and-id-at-the-same-time — chiarfe, Sep 02 '13 at 21:21
possible duplicate of [get element value using jquery](http://stackoverflow.com/questions/8555064/get-element-value-using-jquery) — Trikaldarshiii, Sep 03 '13 at 00:44

Adrift · Accepted Answer · 2013-09-04T19:41:16.343

4

You can use:

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

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

edited Sep 04 '13 at 19:41

answered Sep 02 '13 at 21:21

Adrift

58,167
12
92
90

4

I love that there's a colour called 'peru' – Adam Hopkinson Sep 02 '13 at 21:43

score 3 · Answer 2 · answered Sep 02 '13 at 21:21

3

Try this

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

answered Sep 02 '13 at 21:21

Sachin

40,216
7
90
102

score 1 · Answer 3 · answered Sep 02 '13 at 21:30

1

If you want to access your div that has class='foo bar' and data-id=12345 :

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

If you want simply to access the first div element that has class='foo bar' :

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

answered Sep 02 '13 at 21:30

Charaf JRA

8,249
1
34
44

nbrooks · Answer 4 · 2013-09-02T21:47:07.503

Chain the class selectors, then filter based on the data parameter:

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

jsFiddle Demo
You can also easily wrap this logic into a reusable and extensible function:

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

which returns the jQuery collection matching the relevant div elements.

You can extend this to include classes (by passing an array of classes, like ['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 get element by attribute and class

4 Answers4