Moving <li> to nth position and change href link using JavaScript-CodePudding

I want to move the first item on the list into the 10th position and also change the href link from "collections/all" to "collections/all/cotton" by the use of JavaScript. There is no option of adding an id to the elements, is it possible to do it without it?

<ul >
  <li><a href="collections/all">All</a></li>
  <li ><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>

CodePudding user response：

I've included comments before each step of the JavaScript below. If something is not clear, feel free to ask in a comment.

// 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 >
  <li><a href="collections/all">All</a></li>
  <li ><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>

CodePudding user response：

You need to do a few manipulations

Change [0] in the line list.querySelectorAll("li")[0] to the zero based number you need

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 >
  <li><a href="collections/all">All</a></li>
  <li ><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>