Select element based on data attribute

Question

I have the following html and I am trying to add a class to it via the data attribute:

<p class="form-row form-row-wide" data-child-field="child_has_jacket">
</p>

Using jquery I've tried :

jQuery(document).ready(function( $ ){
       $('.form-row [data-child-field='child_has_jacket']').addClass("selected");
  });

Doesnt work. Anyone an idea?

Answer 1

you have a syntax error , replace the ' by " in the data atribute class selector data-child-field="child_has_jacket" , also

attribute selector should have no space with class , otherwise it will search for child element with data attribute

it should be like :

$('.form-row[data-child-field="child_has_jacket"]')

See snippet :

jQuery(document).ready(function( $ ){
       $('.form-row[data-child-field="child_has_jacket"]').addClass("selected").html("selected class added");
  });

.form-row.selected {
  border:1px solid black;
  display:block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-row form-row-wide" data-child-field="child_has_jacket">
</p>

Answer 2

1. Use $('.form-row[data-child-field=child_has_jacket]').addClass("selected");. Check space is removed after .form-row other wise it will start searching for child element with that data attribute.

2. Missing ; in CSS around height and display

Working snippet:

jQuery(document).ready(function( $ ){
   $('.form-row[data-child-field=child_has_jacket]').addClass("selected");
});

/*Other working snippets
jQuery(document).ready(function( $ ){
   $('.form-row[data-child-field="child_has_jacket"]').addClass("selected");
});

jQuery(document).ready(function( $ ){
   $(".form-row[data-child-field='child_has_jacket']").addClass("selected");
});*/

.form-row.selected {
  border:1px solid black;
  width:20px;
  height:20px;
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-row form-row-wide" data-child-field="child_has_jacket">
</p>

Other working snippets:

jQuery(document).ready(function( $ ){
   $('.form-row[data-child-field="child_has_jacket"]').addClass("selected");
});

jQuery(document).ready(function( $ ){
   $(".form-row[data-child-field='child_has_jacket']").addClass("selected");
});