получать текст каждой строки в navbar и добавлять в качестве идентификатора

Question

Я хочу получить текст каждой ссылки и добавить его к ссылке в качестве идентификатора.

вот мой код для навигации:

<div class="navbar">
	<ul>
		<li><a href="#">link1</a></li>
		<li><a href="#">link2</a></li>
		<li><a href="#">link3</a></li>
		<li><a href="#">link4</a></li>
		<li><a href="#">link5</a></li>
	</ul>
</div>

Answer 1

Вы хотите этого, я думаю-

const links = [...document.querySelectorAll('a')];
links.forEach(link => {
  link.setAttribute('id', link.innerText);
});

<div class="navbar">
	<ul>
		<li><a href="#">link1</a></li>
		<li><a href="#">link2</a></li>
		<li><a href="#">link3</a></li>
		<li><a href="#">link4</a></li>
		<li><a href="#">link5</a></li>
	</ul>
</div>

Answer 2

Вы можете l oop на дочерних элементах ссылки ul, используя функцию .each, и устанавливать текст элемента a в качестве текста на каждой итерации, используя функцию .attr:

$(document).ready( function(){
     $('ul a').each(function(item){
          $(this).attr('id', $(this).text());
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
     <ul>
          <li><a href="#">link1</a></li>
          <li><a href="#">link2</a></li>
          <li><a href="#">link3</a></li>
          <li><a href="#">link4</a></li>
          <li><a href="#">link5</a></li>
     </ul>
</div>

Answer 3

Вы можете l oop по ссылкам, используя метод .each(), например:

$('.navbar a').each(...)

Затем получить текст каждой ссылки, используя .text(), как :

$(this).text().trim()  
// .trim() is used to remove whitespace from both sides of this string

и, наконец, установите идентификаторы, используя .attr() как:

$(this).attr('id', value);

Рабочая демонстрация:

$('.navbar a').each(function(){
  $(this).attr('id', $(this).text().trim());
});

[id^='link']{background-color: yellow;text-decoration: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
  </ul>
</div>