Tengo que recorrer un ol y luego obtener cada uno de los li y luego eliminar el texto y agregarle el elemento "<a". El siguiente es el html que se representa:
<ol class="progress"> <li class="list-group-item text-muted list-group-item-success active"> General Information<span>1</span> </li> </ol>Quiero eliminar todas las clases excepto "activas" y luego envolver el texto con Información general como a continuación
<ol class="progress"> <li class="active"> <a href="#">General Information<span> 1</span></a> </li> </ol>Intenté recorrer el Ol usando el siguiente script, pero parece que no encuentro nada.
$('ol.progress').each(function (i, li) { var listItem = li; var lm = $(li).text(); console.log(lm); });Con vainilla js:
document .querySelectorAll('ol.progress > *') // all children of <ol> with class .progress .foreach(elem => { elem.className = 'active' elem.innerHTML = `<a href="#">${elem.innerHTML}</a>` })Veo que está usando JQuery, así que sigamos con esto.
Está recorriendo el ol pero desea recorrer los li s del ol . así que reemplaza
$('ol.progress').each....por
$('ol.progress li').each.... Puede eliminar todas las clases con .removeClass() sin ningún parámetro. Pero como desea conservar la clase active , debe conservar este atributo; en mi versión del código (ver más abajo), usaré una variable para esto.
Además, desea reemplazar la parte HTML y no la parte de texto, por lo que su fragmento se leería
$('ol.progress li').each(function () { var is_active = false; is_active = $(this).hasClass('active'); $(this).removeClass(); if(is_active){ $(this).addClass('active'); } var newcontent = '<a href="#">' + $(this).html() + "</a>"; $(this).html(newcontent); });Con jquery, como puede ver, compruebo si el elemento tiene una clase, luego elimino todas las clases y agrego active si la tuviera.
$('ol.progress li').each(function(i, li) { var listItem = li; if ($(li).hasClass('active')) { $(li).removeAttr('class'); $(li).addClass('active'); } else { $(li).removeAttr('class'); } }); .active { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ol class="progress"> <li class="list-group-item text-muted list-group-item-success active"> General Information<span>1</span> </li> <li class="list-group-item text-muted list-group-item-success"> General Information<span>2</span> </li> <li class="list-group-item text-muted list-group-item-success"> General Information<span>3</span> </li> </ol> En su código, olvidó li en el selector, así que $('ol.progress li') en lugar de $('ol.progress')