Adding tags dynamiccaly using jquery

JavaScript
1

Hello,

Below is the code i had written, I can wrap anchor tag around the img element but while retrieving the href value and assigning it to the newly added anchor it assigning the same value(here yahoo.com) to the 3 images elements instead of google.com and w3schools.com for 2nd and 3rd img tags can anyone explain how to retrieve those vales iteratively.

<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>

</style>
</head>
<body>
<div id="container">
	<div class="pdpimg">
		<img src="img/img02.png"></img>
	 </div>
     <div class="small-message"><a href="https://www.yahoo.com/">1st Image</a></div>
</div>

<div id="container">
	<div class="pdpimg">
		<img src="img/img03.png"></img>
	 </div>
     <div class="small-message"><a href="https://www.google.com/">2nd Image</a></div>
</div>

<div id="container">
	<div class="pdpimg">
		<img src="img/img04.png"></img>
	 </div>
     <div class="small-message"><a href="http://www.w3schools.com/">3rd Image</a></div>
</div>
<script>
$('.pdpimg > img').wrapAll('<a/>');
var url = $(".small-message a").attr("href");
$('#container a').attr('href', url);
</script>
</body>
</html>
2

You can only have an id in the page once, so you’ll need to make those classes.
Something like this should then work.

$('.container').each(function($container) {
  var $img = $container.select('img');
  var url = $container.select('a').attr('href');
  var $link = $('<a>').attr('href', url);
  $img.wrap($link);
});
1 Like
3

First of all, each ID must be unique, so having multiple identical IDs is bound to result in undesired behaviour. Just change the IDs to classes and you’ll be fine. Secondly, you’d have to get and apply the href attributes within a specific .container context, e.g. like

$('.pdpimg > img').wrap('<a/>');

$('.pdpimg a').attr('href', function() {

    return $(this)
        .closest('.container')
        .find('.small-message a')
        .attr('href');
});

BTW, .wrapAll() is used to wrap one tag around multiple elements, which you don’t need here – .wrap() does wrap all occurrences of the element anyway.

Edit: x-post

4

@m3g4p0p

Thanks for the reply.

Able to wrap the img tag within the anchor tag, but I am unable to fetch the attribute value into the anchor tag from return $(this) .closest(‘.container’) .find(‘.small-message a’) .attr(‘href’);

Can anyone advise here.

5

Did you change id="container" to class="container" in your markup?

6

Offfo ya it’s working now thank you very much.

One more sorry for keep on asking below the original code but unable to get the output can you check once.

<div class="fitcolorslist">
	<div class="fitdetials">
		<img src="img/img02.png" width="200" height="200">
	</div>
     <div class="containerresults">
		<ul>
			<li class="product-title">
				<div class="procuct_image_section">
					<a class="stage rel="product" href="https://www.w3schools.com/"><div class="procutimages"><img src="img/thumb02.png"><div>
					</a>
			</li>
			
			<li class="product-title">
				<div class="procuct_image_section">
					<a class="stage rel="product" href="https://www.yahoo.com/"><div class="procutimages"><img src="img/thumb01.png"><div>
					</a>
			</li>
		</ul>
	 </div>
</div>

<div class="fitcolorslist">
	<div class="fitdetials">
		<img src="img/img03.png" width="200" height="200">
	</div>
     <div class="containerresults">
		<ul>
			<li class="product-title">
				<div class="procuct_image_section">
					<a class="stage rel="product" href="https://www.yahoo.com/"><div class="procutimages"><img src="img/thumb01.png"><div>
					</a>
			</li>
			
			<li class="product-title">
				<div class="procuct_image_section">
					<a class="stage rel="product" href="https://www.w3schools.com/"><div class="procutimages"><img src="img/thumb03.png"><div>
					</a>
			</li>
		</ul>
	 </div>
</div>

<div class="fitcolorslist">
	<div class="fitdetials">
		<img src="img/img04.png" width="200" height="200">
	</div>
     <div class="containerresults">
		<ul>
			<li class="product-title">
				<div class="procuct_image_section">
					<a class="stage rel="product" href="https://www.w3schools.com/"><div class="procutimages"><img src="img/thumb03.png"><div>
					</a>
			</li>
			
			<li class="product-title">
				<div class="procuct_image_section">
					<a class="stage rel="product" href="https://www.google.com/"><div class="procutimages"><img src="img/thumb02.png"><div>
					</a>
			</li>
		</ul>
	 </div>
</div>




<script>
$('.fitdetails > img').wrap('<a/>');

$('.fitdetails a').attr('href', function() {

    return $(this)
	  .closest('.fitcolorslist')
      .find('.product-title a:first-child') //Need to grab the first anchor tag element href vale and fetch it into the .fitdetails anchor tag.
       attr('href');
});
</script>
7

In your markup you have “fitdetials” instead of “fitdetails” as in the script; also there are several missing quotes. If you fix this it should work.

8

@m3g4p0p - Thanks for your prompt and quick response …:slight_smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.