CODEWITHSUNDEEP
jqueryappend
Adrian
Adrian

Reputation: 41

jQuery append duplicates content

I am new to jquery. I need help moving content. I am using the append method.

I want to be able to move each of the.links element into each .submitted element within the .node element. Right now append is adding all three .links to each .selected element. I have provided the code and a link to JSFiddle below.

Thanks for your help

Click here to view code in JSFiddle

jQuery

​$('.links').appendTo('.submitted');​​​​​​​​​​​​​​​​​

HTML

<div id="wrapper">
    <div class="node" class="clearfix">
        <h2>Node Title 1</h2>
        <div class="submitted">September 30</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 1 Link 1</a> | 
            <a href="#">Node 1 Link 2</a>
        </div>
    </div>

    <div class="node" class="clearfix">
        <h2>Node Title 2</h2>
        <div class="submitted">September 29</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 2 Link 1</a> | 
            <a href="#">Node 2 Link 2</a>
        </div>
    </div>

    <div class="node" class="clearfix">
        <h2>Node Title 3</h2>
        <div class="submitted">September 26</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 3 Link 1</a> | 
            <a href="#">Node 3 Link 2</a>
        </div>
    </div>
</div>​

CSS

#wrapper { width:600px; margin:0 auto; }
h2 { clear:both; }
.node { border-bottom:1px solid #CCCCCC; }
.submitted { float:left; width:200px; padding:10px; background-color:#CCCCCC; }
.content { float:left; width:360px; padding:10px; }

Upvotes: 3

Views: 14336

Answers (5)

Smelino
Smelino

Reputation: 286

**This is how you can create array duplicate using Jquery: **

let array = $('li a'); let copyOfArray = array.clone().slice();

Upvotes: 0

yodog
yodog

Reputation: 6232

when you do this

$('.links').appendTo('.submitted')

you are selecting all elements with class .links and adding them to all elements with class .submitted

EDIT

now i understood what you want :)

this fixes it

$(".links").each(function(){
    $(this).appendTo( $(this).prevAll('.submitted') );
});

see it working here: http://jsfiddle.net/RASG/SGgM8/8/

ss

Upvotes: 4

Ram
Ram

Reputation: 144689

Try the following.

$('.links').each(function() {
   var $this = $(this);
   $this.appendTo($this.siblings('.submitted'));
})

http://jsfiddle.net/PwJNe/

Note that your markup is invalid, change this:

<div class="node" class="clearfix">

to:

<div class="node clearfix">

Upvotes: 1

Sebastian Perez
Sebastian Perez

Reputation: 456

If I understand correctly you have this:

<div class="node" class="clearfix">
    <h2>Node Title 3</h2>
    <div class="submitted">September 26</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
    <div class="links">
        <a href="#">Link 1</a> | 
        <a href="#">Link 1</a>
    </div>
</div>

And you want it to end up like this:

<div class="node" class="clearfix">
    <h2>Node Title 3</h2>
    <div class="submitted">
        September 26
        <a href="#">Link 1</a> | 
        <a href="#">Link 1</a>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
    <div class="links">
    </div>
</div>

Moving children elements from div.links to div.submitted.

If thats correct then you can do something like this:

$(".node").each( function() {
     //Get the links
     var links = $(this).children(".links").html();
     //Remove the links from the .links div
     $(this).children(".links").html("");
     //Append the links to the .submitted div
     $(this).children(".submitted").append(links);
});

This will iterate through every .node element found in the DOM. Inside the .each block $(this) refers to the .node element.

Hope it helps!

Upvotes: 0

Pandaiolo
Pandaiolo

Reputation: 11568

Three links .links are added to each three .submitted elements

To add only one, restrict with .first() or some jquery filter

Example forked from your fiddle : http://jsfiddle.net/LMbzY/

Upvotes: -1

Related Questions