Home / Questions / 549943
Accepted
Emy
Asked: 2022-08-04 13:40:55 +0800 CST 2022-08-04 13:40:55 +0800 CST

Get the href attribute of a link and set it as the content of the link

  • 772

I have a list with several links that contains only the attribute href:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <ul>
      <li><a href="https:///www.google.com"></a></li>
      <li><a href="https:///www.youtube.com"></a></li>
      <li><a href="https:///www.twitter.com"></a></li>
    </ul>
  </body>
</html>

I must obtain the href attribute of each link to put it as the link text, but when I print it in the console it appears as undefined. In the file script.jsI have:

$(document).ready(function () {
  $('a').each((index, value) => {
    var enlace = $(this).attr('href');
    console.log(enlace);
    $(this).text(enlace);
  });
});

I expected this result:

result

But it still shows me empty:

empty

html

3 Answers

  1. Best Answer

    just modify the each of jquery, and with that you have

    $(document).ready(function () {
  $('a').each(function(){
    var enlace = $(this).attr('href');
   $(this).text(enlace);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <ul>
      <li><a href="https:///www.google.com"></a></li>
      <li><a href="https:///www.youtube.com"></a></li>
      <li><a href="https:///www.twitter.com"></a></li>
    </ul>
  </body>
</html>

    • 1

  2. Try adding a selector to the link container, something like this.

    jQuery(document).ready(function(){

    // Obtenemos el listado con los enlaces
    let listado = jQuery( 'ul.listado a' );

    // Recorremos todos los enlaces
    jQuery(listado).each(function(index){

        // Obtenemos en enlace de nuestra etiquetad A
        let enlace = jQuery(this).attr( 'href' );

        // Cambiarmos el .text del item
        jQuery(this).text( enlace );
        
    });

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Listado de Enlaces -->
<ul class="listado">
     <li><a href="https:///www.google.com"></a></li>
     <li><a href="https:///www.youtube.com"></a></li>
     <li><a href="https:///www.twitter.com"></a></li>
 </ul>

    Once with the selector you get all the items inside our container, loop through them and then update them.

    Instead of an arrow function you just execute a normal function.

    • 0 

  3. $(document).ready(function () {
    $('a').map(function(){
        $(this).text($(this).attr("href"))
    })
});
          
    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <ul>
      <li><a href="https:///www.google.com"></a></li>
      <li><a href="https:///www.youtube.com"></a></li>
      <li><a href="https:///www.twitter.com"></a></li>
    </ul>
  </body>
</html>

    try this

    • 0