Quiero mover el primer elemento de la lista a la décima posición y también cambiar el enlace href de "colecciones/todos" a "colecciones/todos/algodón" mediante el uso de JavaScript. No hay opción de agregar una identificación a los elementos, ¿es posible hacerlo sin ella?
<ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>He incluido comentarios antes de cada paso del JavaScript a continuación. Si algo no está claro, no dude en preguntar en un comentario.
// Select the unordered list by its classes const list = document.querySelector('ul.tags.tags--collection.inline-list'); // Select the 1st item in the list by its position const first = list.querySelector(':scope > li:nth-child(1)'); // Select the 10th item in the list by its position const tenth = list.querySelector(':scope > li:nth-child(10)'); // Move the 1st item after the 10th. // Inserting removes an item from its parent and inserts it into the new location. // This shifts the 10th item into position 9, and the first item into position 10. tenth.insertAdjacentElement('afterend', first); // Select the anchor within the list item and modify its "href" property first.querySelector(':scope > a').href = 'collections/all/cotton'; <ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>Necesitas hacer algunas manipulaciones.
Cambie [0] en la línea list.querySelectorAll("li")[0] al número basado en cero que necesita
const list = document.querySelector("ul.tags.tags--collection.inline-list"); // or use an ID const li = list.querySelectorAll("li")[0]; // or list.firstElementChild const link = li.querySelector("a"); link.href = link.href.replace("all","all/cotton"); console.log(link.href); list.insertBefore(li, list.children[10]); // note to move to the end, just use list.append(li) <ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>