Estoy tratando de agregar una clase a un div según la primera palabra de la cadena. p.ej
<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> En lo anterior, si la primera palabra del título del evento es Ballet, debe agregar la clase ballet a am-event , si Dance luego baila a am-event .
Estoy intentando lo siguiente, pero el código no parece funcionar como se esperaba, ya que parece tener una aparición de la palabra en la cadena en lugar de solo la primera palabra:
$(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>Recorte el texto para que pueda ver si startsWith con alguna de esas palabras, mucho más elegante (y semánticamente apropiado y comprensible) que compararlo con un resultado indexOf .
$(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>Alternativa, también puede usar split(' ')[0] y comparar texto y, en función de eso, agregar su clase.
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>Necesitas trim el espacio en blanco. A continuación, puede utilizar 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>