CODEWITHSUNDEEP
jquery
Rajesh B
Rajesh B

Reputation: 39

Append the element with each function jQuery

I know this is a simple work around but I couldn’t find the right path. Please help!

I have a HTML structure like this

<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
</div>

Now I want to append the <img> inside the grand-child1 <span> on 1st two <main> divs.

If I use the following jQuery <img> are appearing twice in all <main> divs

$("img").appendTo(".grand-child1");

So, I have used each function like this. But nothing works for me.

$(".main img").each(function () {
    jQuery(this).find('img').appendTo(this).closest(".grand-child1");
});

Upvotes: 2

Views: 29

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your logic in the second example is almost there, but not quite right. The this keyword already references the img element, so there's no need to find() it. Also, the .child1 element is a sibling of the img so you can use siblings() instead of closest() (which is for finding parent elements). Finally the .child1 element needs to be provided as an argument to appendTo().

Try this example:

$(".main img").each(function() {
  $(this).appendTo($(this).siblings(".child1"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="main">
  <span class="child1">some content</span>
  <span class="child2">some content</span>
  <img src="image.jpg" />
</div>
<div class="main">
  <span class="child1">some content</span>
  <span class="child2">some content</span>
  <img src="image.jpg" />
</div>
<div class="main">
  <span class="child1">some content</span>
  <span class="child2">some content</span>
</div>

Update:

Given the new HTML in the question, you would just need to amend the DOM traversal logic. Use prev() and find() instead of siblings():

$(".main img").each(function() {
  $(this).appendTo($(this).prev('.parent').find(".grand-child1"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
</div>

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

Another approach would be to iterate your .main like:

$(".main").each((i, el) => $(".grand-child1", el).append($("img", el)));

where the jQuery format $("selector", el) is the same as $(el).find("selector")

Demo time:

$(".main").each((i, el) => $(".grand-child1", el).append($("img", el)));
.grand-child1 {background: gold;}
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="https://lh3.googleusercontent.com/a-/AOh14GjX6DjQWxlXWc82JMbuluX6Jmgeg305J6utvwOgjg=k-s64" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="https://lh3.googleusercontent.com/a-/AOh14GjX6DjQWxlXWc82JMbuluX6Jmgeg305J6utvwOgjg=k-s64" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Upvotes: 1

Related Questions