Append the element with each function jQuery-CodePudding

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 >
  <div >
    <div >some content</div>
    <div ><span >some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div >
  <div >
    <div >some content</div>
    <div ><span >some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div >
  <div >
    <div >some content</div>
    <div ><span >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");
});

CodePudding user response：

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 >
  <span >some content</span>
  <span >some content</span>
  <img src="image.jpg" />
</div>
<div >
  <span >some content</span>
  <span >some content</span>
  <img src="image.jpg" />
</div>
<div >
  <span >some content</span>
  <span >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 >
  <div >
    <div >some content</div>
    <div ><span >some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div >
  <div >
    <div >some content</div>
    <div ><span >some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div >
  <div >
    <div >some content</div>
    <div ><span >some content</span></div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >some content</div>
    <div ><span >some content</span></div>
  </div>
  <img src="https://lh3.googleusercontent.com/a-/AOh14GjX6DjQWxlXWc82JMbuluX6Jmgeg305J6utvwOgjg=k-s64" />
</div>
<div >
  <div >
    <div >some content</div>
    <div ><span >some content</span></div>
  </div>
  <img src="https://lh3.googleusercontent.com/a-/AOh14GjX6DjQWxlXWc82JMbuluX6Jmgeg305J6utvwOgjg=k-s64" />
</div>
<div >
  <div >
    <div >some content</div>
    <div ><span >some content</span></div>
  </div>
</div>

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