Traverse through the div elements with identical class using jQuery

Hey there! I have a bunch of classes named itemdata and I'm looking to incorporate some jQuery within each div. Within every div, there is a link that I want to extract the href attribute value from and enclose it within another <span> in that specific div.

My current code structure appears as follows:

<div class="itemdata" >
<a  href="www.link1" class="frame">
<img  src='...' />
</a>
<span class="wlt_shortcode_TITLE">Title 1</span>
</div>

<div class="itemdata" >
<a  href="www.link2" class="frame">
<img  src='...' />
</a>
<span class="wlt_shortcode_TITLE">Title 2</span>
</div>

<div class="itemdata" >
<a  href="www.link3" class="frame">
<img  src='...' />
</a>
<span class="wlt_shortcode_TITLE">Title 3</span>
</div>

Below is my jQuery implementation:

</script>
jQuery( ".itemdata" ).each(function() {
var link = jQuery( this ).find(".frame").attr("href");
jQuery(this).find(".wlt_shortcode_TITLE" ).wrap("<a href='" + link + "'></a>");
});
</script>

The desired output HTML should appear as follows:

    <div class="itemdata" >
    <a  href="www.link1" class="frame">
    <img  src='...' />
    </a>
    <a  href="www.link1"><span class="wlt_shortcode_TITLE">Title 1</span></a>
    </div>

    <div class="itemdata" >
    <a  href="www.link2" class="frame">
    <img  src='...' />
    </a>
    <a  href="www.link2"><span class="wlt_shortcode_TITLE">Title 2</span></a>
    </div>

    <div class="itemdata" >
    <a  href="www.link3" class="frame">
    <img  src='...' />
    </a>
    <a  href="www.link3"><span class="wlt_shortcode_TITLE">Title 3</span></a>
    </div>

However, the current HTML rendered is not quite what I intended:

        <div class="itemdata" >
        <a  href="www.link1" class="frame">
        <img  src='...' />
        </a>
        <a  href="undefined">
         <a  href="www.link1">
          <a  href="www.link1"><span class="wlt_shortcode_TITLE">Title 1</span>
          </a>
         </a>
        </a>
        </div>

        <div class="itemdata" >
        <a  href="www.link2" class="frame">
        <img  src='...' />
        </a>
        <a  href="undefined">
         <a  href="www.link1">
          <a  href="www.link1"><span class="wlt_shortcode_TITLE">Title 2</span>
          </a>
         </a>
        </a>
        </div>

        <div class="itemdata" >
        <a  href="www.link3" class="frame">
        <img  src='...' />
        </a>
        <a  href="undefined">
         <a  href="www.link1">
          <a  href="www.link1">
            <span class="wlt_shortcode_TITLE">Title 3</span>
          </a>
         </a>
        </a>
        </div>

javascriptjqueryhtmlcss

Answer №1

Almost there! Instead of using .add, try utilizing .find. Make this small adjustment and it should work correctly:

jQuery( ".itemdata" ).each(function() {
    var lk = jQuery( this ).find(".frame").attr("href");
    jQuery(this).find(".wlt_shortcode_TITLE" ).wrap("<a href='" + lk + "'></a>");
});

Check out the Fiddle for a working example: http://jsfiddle.net/rmf7yu7d/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can input be styled instead of using a textarea for design?

Within the confines of a PDF's single-line display, I am in need of including text that does not contain new lines. While using an input instead of a textarea seems like the ideal choice, inputs do not naturally support line breaks and utilizing keydo ...

htmlcss

Retrieve the file from Amazon S3 and download it

I'm having an issue with downloading a file from a directory outside of the root. Whenever I try, it defaults to looking in the root directory. I need users to be able to download these files on my site. The file was initially uploaded to Amazon S3 a ...

javascriptnode.jsamazon-web-servicesfileexpress

What is the best way to toggle the readonly attribute on an input within an ng-repeat row when a button is clicked?

Here is some HTML content: <!---- HTML Content ----> <div class="container-fluid" ng-app="myApp"><br> <div class="row" ng-controller="mainController"> <div class="col-md-12"> <div class="panel pa ...

javascripthtmlangularjs

A guide to successfully adding the dblclick event functionality on an iPad

I have developed a marquee planner for a client that involves interactive marquees and furniture elements. Users can click on the items to place them on a canvas and drag them around. My main challenge was making it work smoothly on touch devices, particul ...

jqueryiosipad

After being reloaded multiple times, the time and date mysteriously vanish

Issue with Javascript/jQuery/jQuery Mobile Code After reloading or refreshing the page multiple times, the values for currentDate and currentTime seem to disappear sporadically. Strangely, they start working fine again after a few more reloads. Can anyone ...

javascriptjqueryhtmljquery-mobile

Ways to append each list item from one unordered list to the end of another based on their unique styles

I am in the process of making a website responsive and I am faced with the task of combining two different menus. In order to achieve this, I need to transfer all list items (li) from one unordered list (ul) to another. Provided below is a simplified vers ...

javascriptjqueryhtmlcss

Exploring the world of tweets using React

While trying to retrieve tweets using the Twit package, I keep encountering error 400. I received an error message stating: "Failed to load https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=twitterdev&count=10: Response to prefligh ...

javascriptnode.jsreactjstwitternpm

How can I retrieve the name of the upcoming middleware function in Express.JS?

Hey there, I'm currently facing a challenge with retrieving the names of middleware functions in a specific request route. Let's consider the code snippet below as an example: const authorizeRoute = (req,res,next) => { let nextFunctionName = ...

javascriptexpressmiddleware

Loading Data in CodeMirror using XMLHttpRequest (XHR)

Is there any progress in loading the content into CodeMirror using XHR? ...

javascriptcodemirror

What is the best way to include a php file within a div element?

I'm attempting to reload a specific div element only. $("#captcha").html('<?php echo 'abc';?>'); // This is just a test and works fine Since the content of the div is quite large, I attempted: $("#captcha").html('< ...

phpjavascriptjqueryinclude

Remove the ability to select from the dropped list item

Here is the HTML and Javascript code I used to enable drag and drop functionality for list items from one div to another: HTML: <div class="listArea"> <h4> Drag and Drop list in Green Area: </h4> <ul class="unstyle"> & ...

javascripthtmlangulartypescriptdrag-and-drop

Add a label to the location of an event

I have an unordered list like this <ul class="fine"> <li>One</li> <li>Two</li> <li>Three</li> </ul> When I click on a li item, I want to dynamically add a <textarea> under that specific li element, as ...

jquery

How can I access the binary data source of an image using ASP.NET?

Is there a way to preview an image before uploading it in an ASP.NET webform? I have tried using the code below, but now I am stuck on how to upload the image to the server after clicking the Save button. When checking my codebehind, I found that the <i ...

c#jqueryasp.netimagebinary-data

Unable to fetch the Observable value

I have a function that returns an Observable<Person[]>, where Person is my model: export interface Person { id: string; age: number; } Now in my component.ts, I am calling this function and aiming to retrieve the array to display it in the HTML ...

javascriptangularjstypescriptangularangular2-routing

What is the best way to create this design with solely CSS, HTML, and Bootstrap (complete with check icon)?

I am eager to create this specific layout using only CSS, HTML, and Bootstrap. https://i.sstatic.net/ceyIv.png The green circle should contain a check mark symbol (although I couldn't manage to draw it in Paint). Pay attention to the text inside the ...

htmlcssbootstrap-4

Grunt: Executing tasks exclusively for updated files - the ultimate guide!

In my Gruntfile.js, I have the configuration set up as follows: module.exports = function(grunt) { require('jit-grunt')(grunt); grunt.initConfig({ uglify: { options: { manage: false }, my_target: { file ...

javascriptnode.jsgruntjs

Can you elaborate on this specific JavaScript concept?

I'm not very knowledgeable about javascript. Could someone please explain this structure to me? [{a:"asdfas"},{a:"ghdfh",i:54},{i:76,j:578}] What exactly is being declared in this structure? It appears to be an array with 3 elements, correct? Each e ...

javascriptarraysjson

How can you set a $_GET variable without having to reload the page?

I have a table on my website that displays values for each row, and here's an example code snippet: //JAVASCRIPT <tr onclick="window.history.replaceState(null, null, 'myPage.php?ID=2');"> The URL changes with this code, but it doesn& ...

javascriptphpajax

Ways to alter a PHP variable with each AJAX request

Utilizing AJAX to dynamically add more content to an image gallery. I'm passing a PHP variable to dictate the current page number and other necessary data. Each time new data is fetched via AJAX, I want to increment the page variable by one to fetch ...

javascriptphpjqueryajax

How can I update jQuery CSS method on resize event?

Having trouble vertically centering a div inside the body? I've come up with a jQuery function that calculates the ideal margin-top value for achieving perfect vertical alignment. Here's how it works: Obtain container height, Get child height, ...

javascriptjqueryvertical-alignmentviewportwindow-resize