Select 基于数据属性的元素

Question

我有以下 html，我正在尝试通过数据属性向其添加 class：

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

使用 jquery 我试过了 :

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

无效。有人有想法吗？

Answer 1

您有一个语法错误，请将数据属性 class 选择器 data-child-field="child_has_jacket" 中的 ' 替换为 "，还有

属性选择器应该没有 space 和 class ，否则它将搜索具有数据属性

的子元素

应该是这样的：

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

查看片段：

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

使用$('.form-row[data-child-field=child_has_jacket]').addClass("selected");。检查 space 在 .form-row 之后被删除，否则它将开始搜索具有该数据属性的子元素。
在 CSS 中缺少 height 和 display
附近的 ;

工作片段：

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>

其他工作片段：

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");
});

Select 基于数据属性的元素

Select element based on data attribute

javascript

css

jquery

custom-data-attribute