检查div是否包含要在jQuery中添加类的文本

Question

我想检查一个特定的div是否包含一个特定的词，那么它应该添加一个类。例如，如果div有芭蕾，它应该添加芭蕾类，如果有瑜伽，它应该添加瑜伽类，等等。

下面是我正在尝试的代码，但它似乎不起作用:

$(".am-event").each(function() {
if ($(this).text().trim() == "Ballet") {
$(this).addClass('ballet')
} else if ($(this).text().trim() == "Yoga") {
$(this).addClass('yoga')
} else {
}
});

.am-event {
display: block;
padding: 10px;
border: 1px solid grey;
}
.ballet {
background:red;
}
.yoga {
background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="am-event-22" class="am-event" style="pointer-events: all;">
<div class="am-event-data">
<div class="am-event-info">
<div class="am-event-title">Ballet
<span class="am-event-booking-status open">Open</span></div>
</div>
</div>
</div>
<div id="am-event-23" class="am-event" style="pointer-events: all;">
<div class="am-event-data">
<div class="am-event-info">
<div class="am-event-title">Yoga
<span class="am-event-booking-status open">Open</span></div>
</div>
</div>
</div>
<div id="am-event-24" class="am-event" style="pointer-events: all;">
<div class="am-event-data">
<div class="am-event-info">
<div class="am-event-title">Ballet
<span class="am-event-booking-status open">Open</span></div>
</div>
</div>
</div>

Answer 1

尝试使用indexOf方法检查字符串是否出现在句子中

trim将删除所有开头和结尾的空格和新行字符，但这将返回完整的句子，如"Ballet Open","Yoga Open"等。你必须检查特定的字符串是否在那里。为此，您必须使用indexOf方法，如果存在，则返回该特定单词的起始索引，如果该单词不在该字符串中，则返回-1。

$(document).ready(function () {
$(".am-event").each(function () {
if ($(this).text().trim().indexOf("Ballet") !== -1) {
$(this).addClass("ballet");
} else if ($(this).text().trim().indexOf("Yoga") !== -1) {
$(this).addClass("yoga");
} else {
}
});
});

.am-event {
display: block;
padding: 10px;
border: 1px solid grey;
}
.ballet {
background: red;
}
.yoga {
background: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="am-event-22" class="am-event" style="pointer-events: all">
<div class="am-event-data">
<div class="am-event-info">
<div class="am-event-title">
Ballet <span class="am-event-booking-status open">Open</span>
</div>
</div>
</div>
</div>
<div id="am-event-23" class="am-event" style="pointer-events: all">
<div class="am-event-data">
<div class="am-event-info">
<div class="am-event-title">
Yoga <span class="am-event-booking-status open">Open</span>
</div>
</div>
</div>
</div>
<div id="am-event-24" class="am-event" style="pointer-events: all">
<div class="am-event-data">
<div class="am-event-info">
<div class="am-event-title">
Ballet <span class="am-event-booking-status open">Open</span>
</div>
</div>
</div>
</div>

Answer 2

这可能对你有帮助。

/* Create function */
function addClassByKeyword(keyword, key_class){
$(".am-event").each(function() {

var item_text = $(this).find('.am-event-title').text();

var keyword_pattern = new RegExp(keyword, "gi");
var search_word = item_text.match(keyword_pattern);
if (search_word && search_word.length !== 0) {
$(this).addClass(key_class);
}

});
}
/* Call the function */
addClassByKeyword("Yoga", "yoga");
addClassByKeyword("Ballet", "ballet");

Answer 3

由于结构是相同的(类的类型/然后状态)-您可以简单地获得文本内容的第一个单词-将其转换为小写并直接添加到类列表

请注意，当您使用text()时-它将返回整个节点的文本-在本例中是包含的span -这可能是您的初始代码无法工作的原因。

我不会做一个if/else或indexOf()检查，甚至是一个三进制-我将简单地获取文本，将其拆分为第一个单词，将其转换为小写，然后将其作为一个类添加到div。

那么这将给出"ballet"或";yoga"作为第一个单词，然后添加到div的classList中。

$(".am-event").each(function() {
const type = $(this).text().trim().split(' ')[0].toLowerCase();
$(this).addClass(type);
console.log(type);
});

.am-event {
display: block;
padding: 10px;
border: 1px solid grey;
}
.ballet {
background:red;
}
.yoga {
background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="am-event-22" class="am-event" style="pointer-events: all;">
<div class="am-event-data">
<div class="am-event-info">
<div class="am-event-title">Ballet
<span class="am-event-booking-status open">Open</span></div>
</div>
</div>
</div>
<div id="am-event-23" class="am-event" style="pointer-events: all;">
<div class="am-event-data">
<div class="am-event-info">
<div class="am-event-title">Yoga
<span class="am-event-booking-status open">Open</span></div>
</div>
</div>
</div>
<div id="am-event-24" class="am-event" style="pointer-events: all;">
<div class="am-event-data">
<div class="am-event-info">
<div class="am-event-title">Ballet
<span class="am-event-booking-status open">Open</span></div>
</div>
</div>
</div>