CODEWITHSUNDEEP
javascriptjquery
Ayman P.
Ayman P.

Reputation: 3

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

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?

Upvotes: 0

Views: 34

Answers (2)

bigblind
bigblind

Reputation: 12867

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"]');

Upvotes: 2

Curtis
Curtis

Reputation: 103348

Use attributes in your jQuery selector:

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

Upvotes: 2

Related Questions