I'm trying to solve an issue that I'm facing with JQuery about each. I have a list of items (class .list) that I need to target and wrap in a div (class .wrap). It works if the list but when there is a second one the loop wrap twice the list in the new div.

The idea is that every time there is a class called list, the loop wrap that specific class in a div called wrap.

Here is the code

HTML

 <div class='parent'>
    <div class='child'>
      <div class='list'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
    </div>
  </div>
  
   <div class='parent'>
    <div class='child'>
      <div class='list'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
    </div>
  </div>

JQuery

jQuery(".parent").each(function () {
  jQuery(".list").wrap("<div class='wrap'></div>");
});

This is the result with the error. The class list is wrapped twice as you can see from the example below.

<div class="parent">
    <div class="child">
      <div class="wrap"><div class="wrap"><div class="list">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div></div></div>
    </div>
  </div>

And this is what I'm trying to achieve.

<div class="parent">
    <div class="child">
      <div class="wrap">
          <div class="list">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
      </div>
    </div>
  </div>

Thank you in advance!