How to find an element based on different data attributes with certain values

Question

I've got some div tags with diffrent data attributes, for example ,

<div class="sh_content" id="sh_content_3" data-price="price_1" data-capacity="capacity_1" data-debit="debit_3">
<!-- Content --->
</div>
<div class="sh_content" id="sh_content_2" data-price="price_1" data-capacity="capacity_2" data-debit="debit_2">
    <!-- Content --->
    </div>

Using js or jquery, how can I find the "div" tag that contains values "price_1,capacity_1,debit_2". I searched long for it and didn't find a convenient solution. Any ideas on what I'm missing?

Possible duplicate of [How to get the data-id attribute?](http://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) — theoretisch, Dec 21 '16 at 11:40

score 2 · Answer 1 · answered Dec 21 '16 at 11:42

2

Use attributes in your jQuery selector:

$("div[data-price=price_1][data-capacity=capacity_2][data-debit=debit_2]");

answered Dec 21 '16 at 11:42

Curtis

101,612
66
270
352

score 2 · Accepted Answer · answered Dec 21 '16 at 11:43

You can use the attribute selector for this.

You can do this both with and without jquery.

var elements = document.querySelectorAll('div[data-price="price_1][data-capacity="capacity_1"][data-debit="debit_2"]');

Or with jQuery:

var $elements = $('div[data-price="price_1][data-capacity="capacity_1"][data-debit="debit_2"]');

How to find an element based on different data attributes with certain values

2 Answers2

Linked