Tengo el siguiente fragmento de código JQuery que busca instancias de elementos con la clase <xyz>-annotation-invisible un documento html y lo reemplaza con <xyz>-annotation-visible . El problema es que si un elemento en particular ya tiene la clase <abc>-annotation-visible , entonces quiero eliminar todas las clases de la forma *-annotation-visible y *-annotation-invisible y reemplazarlas con la clase multiple-annotation-visible ¿Cómo puedo verificar si un elemento en particular ya tiene <abc>-annotation-visible ?
const urlParams = new URLSearchParams(window.location.search); const annotationTypes = urlParams.get('annotypes').split(','); const multipleVisibleClass = "multiple-annotation-visible"; $(document).ready(function () { for (var i=0; i<annotationTypes.length; i++) { var annotype = annotationTypes[i]; var annotationVisibleClass = `${annotype}-annotation-visible`; var annotationInvisibleClass = `${annotype}-annotation-invisible`; var elem = $(`.${annotationInvisibleClass}`); if (elem.hasClass(anyVisibleClass)) # not sure how to do this part { elem.removeClass(anyVisibleClass); elem.addClass(multipleVisibleClass); } else { elem.addClass(annotationVisibleClass); } elem.removeClass(annotationInvisibleClass); } });Podría usar is() y el atributo termina con selecor :
let elem = $("div"); console.log(elem.is("[class$='-annotation-visible']")); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="<abc>-annotation-visible">test</div>Puede obtener las clases de los elementos objetivo, dividir las clases en una matriz y luego manipular la matriz para obtener los resultados deseados. Prueba esto
const urlParams = new URLSearchParams(window.location.search); const annotationTypes = urlParams?.get('annotypes')?.split(',') ?? []; $(document).ready(function(){ annotationTypes.forEach(annotype => { let visible = `${annotype}-annotation-visible`; let invisible = `${annotype}-annotation-invisible`; let multiple = "multiple-annotation-visible"; $(`.${invisible}, .${visible}`).each(function(){ let arr = []; $(this).attr('class').split(' ').forEach(cls => { if(cls === invisible){ arr.push(visible); }else if(cls === visible){ arr.push(multiple); }else{ arr.push(cls); } }); $(this).attr('class', arr.join(' ')); }) }) });