repeating the identical content in the same setting

Question

repeating the identical content in the same setting

I am encountering an issue with jquery as I have 2 different sets of icons, each of which I want to do the same thing:

My primary codes are

<ul>
      <li>
          <a href="">
              <i class="fa fa-facebook"></i>
          </a>
      </li>

       <li>
          <a href="">
              <i class="fa fa-twitter"></i>
          </a>
      </li>
   </ul>

What I want after loading on my browser

<ul>
      <li>
          <a href="">
              <i class="fa fa-facebook"></i>
              <i class="fa fa-facebook"></i>
          </a>
      </li>

       <li>
          <a href="">
              <i class="fa fa-twitter"></i>
              <i class="fa fa-twitter"></i>
          </a>
      </li>
   </ul>

I have attempted to use

var socials = $("ul a");
socials.each(function ( index,elem ){
    var jumpIcons = $( this ).find("i");
    socials.append(jumpIcons);
});

However, the result is the browser hanging :'(

javascript jquery html css

Answer 1

Answer №1

To incorporate and duplicate the element, you must first clone it and then add it to the existing a element.

var socials = $("ul a");
socials.each(function (index, elem) {
    var jumpIcons = $(this).find("i");
    //It is crucial to clone the current element before appending it to avoid simply moving the existing `i` element 
    //Additionally, ensure the cloned element is appended only to the current 'a' element and not to all 'a' elements within socials, preventing excessive iterations in case of multiple 'ul' and 'a' elements on the page leading to unresponsive behavior
    $(this).append(jumpIcons.clone());
});

View the demonstration: Fiddle

A more streamlined version:

var socials = $("ul a");
socials.append(function (index, elem) {
    return $(this).find("i").clone();
});

View the demonstration: Fiddle

Answer 2

To incorporate and duplicate the element, you must first clone it and then add it to the existing a element.

var socials = $("ul a");
socials.each(function (index, elem) {
    var jumpIcons = $(this).find("i");
    //It is crucial to clone the current element before appending it to avoid simply moving the existing `i` element 
    //Additionally, ensure the cloned element is appended only to the current 'a' element and not to all 'a' elements within socials, preventing excessive iterations in case of multiple 'ul' and 'a' elements on the page leading to unresponsive behavior
    $(this).append(jumpIcons.clone());
});

View the demonstration: Fiddle

A more streamlined version:

var socials = $("ul a");
socials.append(function (index, elem) {
    return $(this).find("i").clone();
});

View the demonstration: Fiddle

Answer 3

Answer №2

Utilizing the clone() function can be helpful, as demonstrated in the code snippet below:

var socialLinks = $("ul a");
socialLinks.each(function (i, element) {
    var clonedIcons = $(this).find("i").clone(); // create a clone of the 'i' element
    $(this).append(clonedIcons); // append the cloned icons to the current element
});

Answer 4

Utilizing the clone() function can be helpful, as demonstrated in the code snippet below:

var socialLinks = $("ul a");
socialLinks.each(function (i, element) {
    var clonedIcons = $(this).find("i").clone(); // create a clone of the 'i' element
    $(this).append(clonedIcons); // append the cloned icons to the current element
});

Answer 5

Answer №3

Just make a duplicate of each icon for every link with all its associated actions and attach it to the link. Give this code a try -

var socialIcons = $("li a");
socialIcons.each(function ( index, element ){
    var clonedIcons = $( this ).find("i").clone(true, true); //remove true, true if events are not necessary
    $(this).append(clonedIcons);
});

Answer 6

Just make a duplicate of each icon for every link with all its associated actions and attach it to the link. Give this code a try -

var socialIcons = $("li a");
socialIcons.each(function ( index, element ){
    var clonedIcons = $( this ).find("i").clone(true, true); //remove true, true if events are not necessary
    $(this).append(clonedIcons);
});

repeating the identical content in the same setting

My primary codes are

What I want after loading on my browser

I have attempted to use

However, the result is the browser hanging :'(

Answer №1

Answer №2

Answer №3

Similar questions

Can you provide instructions on how to configure the npm settings to use the current directory in a pre

What could be causing the position-sticky feature to malfunction within a nested nav on Bootstrap version 5.3.1?

When I attempt to conceal the filter within mat-table using *ngIf, I encounter an issue where I am unable to read the property 'value' due to it being

Using jQuery to transfer array values to a different group of elements

Find the position of an HTML5 canvas element within a webpage

Ways to make an element disappear when clicking outside of it in Angular 7 or with CSS

divs aligned at the same vertical position

Best practices for displaying output in Python Flask after submitting an HTML form

Utilize the power of MYSQL and PHP in conjunction with an HTML form to

Executing javascript whenever a page is updated

Emptying the trumbowyg editor within an Angular environment

Magento theme installation on the website encountered unexpected obstacles

Preventing Users from Accessing NodeJS Express Routes: A Guide

Tips for including type definitions when adding elements to an array in TypeScript

Create independent SVG files using Meteor and iron-router

Controlling HTML5 Video Playback with JavaScript: Pausing at Custom Frames

The value of an AngularJS service is not being reflected in the view

How to reset or clear the RangePicker in Ant Design for React

Refresh Layers in Openlayers with LayerRedraw(), Rotate Features, and Manipulate Linestring Coordinates

Guide to integrating the Google identity services library in a React application