Traverse div elements using jQuery and showcase the text within them

Question

Traverse div elements using jQuery and showcase the text within them

I've got a setup like the one below. I want to use jQuery to grab each link and display its href right below it. Instead of writing code for each div individually, I'm looking for a solution that works for all divs with the 'col' class, and is versatile enough for future additions...

<div class="col">
    <a href="http://google.com">Google</a>
</div>

<div class="col">
    <a href="http://yahoo.com">Yahoo!</a>
</div>

<div class="col">
    <a href="http://facebook.com">Facebook</a>
</div>

<div class="col">
    <a href="http://twitter.com">Twitter</a>
</div>

The desired result is...

<div class="col">
    <a href="http://google.com">Google</a>
    <span>http://google.com</span>
</div>

<div class="col">
    <a href="http://yahoo.com">Yahoo!</a>
    <span>http://yahoo.com</span>
</div>

<div class="col">
    <a href="http://facebook.com">Facebook</a>
    <span>http://facebook.com</span>
</div>

<div class="col">
    <a href="http://twitter.com">Twitter</a>
    <span>http://twitter.com</span>
</div>

Any suggestions are welcome!

javascript jquery html css

Answer 1

Answer №1

It seems like you haven't given it a go at writing the code yourself. It's important to try tackling this on your own.

$('.col a').each(function() {
    var $this = $(this);
    $("<span>"+$this.attr('href')+"</span>").insertAfter($this);
});

Answer 2

It seems like you haven't given it a go at writing the code yourself. It's important to try tackling this on your own.

$('.col a').each(function() {
    var $this = $(this);
    $("<span>"+$this.attr('href')+"</span>").insertAfter($this);
});

Answer 3

Answer №2

$('section.box').each(function(){
  console.log($(this).find("a").attr("href"));
  //Find the solution on your own
});

Answer 4

$('section.box').each(function(){
  console.log($(this).find("a").attr("href"));
  //Find the solution on your own
});

Answer 5

Answer №3

$('.col > a').append(function() { 
    return $('<span>', {text:this.href});
});

Answer 6

$('.col > a').append(function() { 
    return $('<span>', {text:this.href});
});

Answer 7

Answer №4

Here is a solution that should work for you. Utilize the each function and learn more about selectors.

$(document).ready(function(){
   $("div.col").each(function(){
      var hreftext = $(this).find("a").attr("href"); 
      $(this).append("<span>" + hreftext + "</span>");
   });

});

Answer 8

Here is a solution that should work for you. Utilize the each function and learn more about selectors.

$(document).ready(function(){
   $("div.col").each(function(){
      var hreftext = $(this).find("a").attr("href"); 
      $(this).append("<span>" + hreftext + "</span>");
   });

});

Answer 9

Answer №5

Here's a potential solution:

$('div.col').each(function() {
    var $link = $(this).find('a:first'),
        address = $link.attr('href');
    $('<span>').text(address).insertAfter($link);
});

Answer 10

Here's a potential solution:

$('div.col').each(function() {
    var $link = $(this).find('a:first'),
        address = $link.attr('href');
    $('<span>').text(address).insertAfter($link);
});

Answer 11

Answer №6

$(".col").each(function(){
 var link = $(this).find("a");       
 $("<span/>",{text:link.attr('href')}).insertAfter(link);
 });

View Demo

Answer 12

$(".col").each(function(){
 var link = $(this).find("a");       
 $("<span/>",{text:link.attr('href')}).insertAfter(link);
 });

View Demo

Answer 13

Answer №7

You can achieve this easily using a simple jQuery 'append()' method

Check out this example on JsFiddle

$('div.col').each(function(){
        var link = $(this).children('a:first').attr('href');
        $(this).append('<span>' + link + '</span>');
    });

Answer 14

You can achieve this easily using a simple jQuery 'append()' method

Check out this example on JsFiddle

$('div.col').each(function(){
        var link = $(this).children('a:first').attr('href');
        $(this).append('<span>' + link + '</span>');
    });

Answer 15

Answer №8

I agree with the solutions provided. It might be more efficient to cache your selector instead of having jQuery search the DOM each time, especially for larger lists where performance could be impacted.

var col = $('.col a');
col.each(function(){
  var val = $(this).text();
  $(this).append("<span>"+val);
})

http://jsfiddle.net/cXkqc/2/

Update

I made a mistake in understanding the question initially. Here is the updated code and link.

 var col = $('.col a');
   col.each(function(){
   var val = $(this).attr('href');
   $(this).after("<span>"+val);
 })

http://jsfiddle.net/cXkqc/3/

Special thanks to @am not i am

Answer 16

I agree with the solutions provided. It might be more efficient to cache your selector instead of having jQuery search the DOM each time, especially for larger lists where performance could be impacted.

var col = $('.col a');
col.each(function(){
  var val = $(this).text();
  $(this).append("<span>"+val);
})

http://jsfiddle.net/cXkqc/2/

Update

I made a mistake in understanding the question initially. Here is the updated code and link.

 var col = $('.col a');
   col.each(function(){
   var val = $(this).attr('href');
   $(this).after("<span>"+val);
 })

http://jsfiddle.net/cXkqc/3/

Special thanks to @am not i am

Traverse div elements using jQuery and showcase the text within them

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Should property paths be shortened by utilizing new variables for better organization?

Python Selenium returning 'None' when attempting to retrieve the source attribute of an image

How can I combine jQuery UI Themeroller with my own custom jQuery UI widget?

Gather a variety of data inputs from a <select> tag and store them in a String array

Why isn't Bootstrap validation functioning properly in my Modal?

Adding flair to a fresh element and then removing it upon its inception

Attempting to simulate the behavior of nfcManager by utilizing the nfcManager.start() function in react native testing library

Only render the div content in jQuery when the user has made a selection

Changing a variable in an HTML file using a JavaScript file

Show users who liked a post from 2 different collections in Meteor

Removing the JavaScript unicode character 8206 from a text string

Having trouble with button alignment in the header with Bootstrap 3?

The v-on:click event handler is not functioning as expected in Vue.js

Is there a way to track dynamic changes in window dimensions within Vue?

What is the best way to ensure the options/choices div reaches its ideal width?

The error message "Trying to call zmq.zmqVersion as a function, but it's not a function" occured while attempting to import the ZeroMQ

What are the steps to determine if a radio has been examined through programming?

Operating on a duplicate of the array is necessary for mapping an array of objects to function properly

Issue with navigation links on HTML website not functioning as expected

Generate a table containing information organized by category