I am trying to add a class to a div based on the first word of the string. e.g
<div id="am-event-138 " class="am-event">
<div class="am-event-title">Ballet (Live stream from School Ballet)</div>
</div>
<div id="am-event-139" class="am-event">
<div class="am-event-title">Ballet</div>
</div>
<div id="am-event-140" class="am-event">
<div class="am-event-title">Dance (Live stream from School Ballet)</div>
</div>
In the above, if the first word of the event title is Ballet, it should add the class ballet to am-event, if Dance then dance to am-event.
I am trying the following but the code does not seem to work as expected as it seems to take an occurrence of the word in the string rather than just the first word:
$(document).ready(function() {
$(".am-event").each(function() {
if (0 <= $(this).text().indexOf("Ballet")) {
$(this).addClass("ballet");
} else if (0 <= $(this).text().indexOf("Dance")) {
$(this).addClass("dance");
} else {}
})
}).ballet {
background: red;
}
.dance {
background: lightblue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="am-event">
<div id="am-event-138 " class="am-event">
<div class="am-event-title">Ballet (Live stream from School Ballet)
</div>
</div>
<div id="am-event-139" class="am-event">
<div class="am-event-title">Ballet
</div>
</div>
<div id="am-event-140" class="am-event">
<div class="am-event-title">Dance (Live stream from School Ballet)
</div>
</div>
<div id="am-event-141" class="am-event">
<div class="am-event-title">Dance
</div>
</div>
</div>Trim the text so you can see if it startsWith either of those words - much more elegant (and semantically appropriate and understandable) than comparing against an indexOf result.
$(document).ready(function() {
$(".am-event").each(function() {
const text = $(this).text().trim();
if (text.startsWith("Ballet")) {
$(this).addClass("ballet");
} else if (text.startsWith("Dance")) {
$(this).addClass("dance");
}
})
}).ballet {
background: red;
}
.dance {
background: lightblue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="am-event">
<div id="am-event-138 " class="am-event">
<div class="am-event-title">Ballet (Live stream from School Ballet)
</div>
</div>
<div id="am-event-139" class="am-event">
<div class="am-event-title">Ballet
</div>
</div>
<div id="am-event-140" class="am-event">
<div class="am-event-title">Dance (Live stream from School Ballet)
</div>
</div>
<div id="am-event-141" class="am-event">
<div class="am-event-title">Dance
</div>
</div>
</div>Alternative, you can also use split(' ')[0] and compare text and based upon that add your class.
var b = "Ballet";
var d = "Dance"
$(".am-event-title").each(function() {
var text = $(this).text().trim().split(' ')[0];
if (text == b) {
$(this).parent('div').addClass("ballet");
} else if (text == d) {
$(this).parent('div').addClass("dance");
}
}).ballet {
background: red;
}
.dance {
background: lightblue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="am-event">
<div id="am-event-138 " class="am-event">
<div class="am-event-title">Ballet (Live stream from School Ballet)
</div>
</div>
<div id="am-event-139" class="am-event">
<div class="am-event-title">Ballet
</div>
</div>
<div id="am-event-140" class="am-event">
<div class="am-event-title">Dance (Live stream from School Ballet)
</div>
</div>
<div id="am-event-141" class="am-event">
<div class="am-event-title">Dance
</div>
</div>
</div>You need to trim off the whitespace. You can then use startsWith.
$(document).ready(function() {
$(".am-event").each(function() {
const text = $(this).text().trim();
if (text.startsWith('Ballet')) {
$(this).addClass('ballet');
}
if (text.startsWith('Dance')) {
$(this).addClass('dance');
}
});
}).ballet { background: red; }
.dance { background: lightblue; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="am-event">
<div id="am-event-138 " class="am-event">
<div class="am-event-title">Ballet (Live stream from School Ballet)
</div>
</div>
<div id="am-event-139" class="am-event">
<div class="am-event-title">Ballet
</div>
</div>
<div id="am-event-140" class="am-event">
<div class="am-event-title">Dance (Live stream from School Ballet)
</div>
</div>
<div id="am-event-141" class="am-event">
<div class="am-event-title">Dance
</div>
</div>
</div>