Home >JavaScript >Examples in JavaScript >How to select an element by several attributes

How to select an element by several attributes

When you write a more complex script with jQuery (for example a configurator), helper attributes on its elements always come in handy. You will use id and class, and also your own attributes such as data-item-type or data-item-id.
It makes sense to select exactly one element by data-item-type and data-item-id together, which gives you exactly the element you want. How?

Example:
<div class="configurator_item" data-item-type="type_stairs" data-item-id="1">something</div>
<div class="configurator_item" data-item-type="type_stairs" data-item-id="2">something</div>
<div class="configurator_item" data-item-type="type_stairs" data-item-id="3">something</div>
<div class="configurator_item" data-item-type="type_floor" data-item-id="1">something</div>
<div class="configurator_item" data-item-type="type_floor" data-item-id="2">something</div>
<script>
$("[data-item-type='type_stairs'][data-item-id='1']").addClass("selected_form_item");
</script>