Javascript 确定类的名称中是否包含字符串答案

【问题标题】：Javascript to determine if the class contains a string in its nameJavascript 确定类的名称中是否包含字符串
【发布时间】：2020-12-28 01:46:50
【问题描述】：

我有以下使用 R 闪亮可折叠框生成的 html 代码：

<div class="box box-info collapsed-box">
           <div class="box-header">
                     <h3 class="box-title">
                              <div style="display: block; width: 74%; ">1. Governance framework</div>
                     </h3>
                     <div class="box-tools pull-right">
                                <button class="btn btn-box-tool" data-widget="collapse">
                                             <i class="fa fa-minus"></i>
                                </button>
                    </div>
           </div>
           <div class="box-body" id="idtolocate" style="display: block;">
           </div>
</div>

我正在尝试创建一个 javascript，如果字符串 collapsed-box 包含在我需要使用 idtolocate id 定位的第一个 div 类中，它应该返回 TRUE。

这是我的尝试，但不幸的是它不起作用：

function isCollapsed() {
   alert($('#idtolocate').closest('.box').classList.contains('collapsed-box'))
}

【问题讨论】：

jQuery 不公开本机属性，例如 classList。在使用 classList 之前，您必须 .get(0) 或 [0] 来跳出 jQuery 对象，或者使用 prop('classList') 方法。
您应该会看到有关“无法在未定义对象上调用包含”或其他内容的控制台错误，告诉您问题出在哪里。
我认为您的问题的标题可能具有误导性 - 您是要匹配完整的类名，还是类名包含一个字符串但不等于它？

标签： javascript html css r shiny

【解决方案1】：

.classList 是原生 DOM 元素的属性。如果要使用该方法，请先从 jQuery 集合中提取 DOM 元素：

$('#idtolocate').closest('.box')[0].classList.contains('collapsed-box')

或者使用 DOM 方法而不是 jQuery 来选择元素：

document.querySelector('#idtolocate').closest('.box').classList.contains('collapsed-box')

【讨论】：