CODEWITHSUNDEEP
javascriptjquerywordpress
YVH
YVH

Reputation: 207

Appending multiple elements to other elements jQuery JavaScript

I have 7 paragraph elements with the class name catalogue-description that each has a paragraph sibling with the class name redirect-link.

I am trying to append the redirect link elements to the catalogue-descriptionelements. The result should be that for each catalogue-description, there is one redirect link element as its child.

However, when I run my code, only 1 of the 7 catalogue-description will have all 7 redirect link elements appended to it, instead of one of each.

Here is my code:

HTML:

<p class="catalogue-description">LOREM IPSUM.</p>
<p class="redirect-link"> 
    HELLO
</p>

jQuery:

jQuery(".catalogue-description").each(function(){
    jQuery(this).append(jQuery(".redirect link"));
})

Desired Result:

    <p class="catalogue-description">
        LOREM IPSUM.
        <p class="redirect-link"> 
            HELLO
       </p>
    </p>

    <p class="catalogue-description">
        LOREM IPSUM.
        <p class="redirect-link"> 
            HELLO
       </p>
    </p>

Upvotes: 0

Views: 45

Answers (2)

Ravenloup
Ravenloup

Reputation: 46

$(".catalogue-description").each(function(){
   $(this).append('<p class="redirect-link">HELLO</p>');
})

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 371213

You need to select the .redirect-link that's the sibling of the current .catalogue-description that's being iterated over, else all .redirect-links will be selected and appended to the current .catalogue-description. Use .next() to get the next sibling:

jQuery(".catalogue-description").each(function(){
    const $this = jQuery(this);
    $this.append($this.next());
})


jQuery(".catalogue-description").each(function() {
  const $this = jQuery(this);
  $this.append($this.next());
})
body > p {
  border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="catalogue-description">LOREM IPSUM.</p>
<p class="redirect-link">
  HELLO
</p>
<p class="catalogue-description">LOREM IPSUM.</p>
<p class="redirect-link">
  HELLO
</p>

Upvotes: 1

Related Questions