Insert items matching data attribute to ID's with jQuery-CodePudding

I have a group of spans in a div that I'm try to match and move to a corresponding id. Each span has a data attribute that matches the parent ID of the target. I'm trying to use jQuery to match the data attributes in the spans and then append them before a separate span in the parent div ID's.

Here's my code:

HTML

<div id="id-expand-2">
  <a class="thing" href="#">
    <div class="item-title">
      <span>Title 1</span>
    </div>
  </a>
</div>
<div id="id-expand-4">
  <a class="thing" href="#">
    <div class="item-title">
      <span>Title 2</span>
    </div>
  </a>
</div>
<div id="id-expand-6">
  <a class="thing" href="#">
    <div class="item-title">
      <span>Title 3</span>
    </div>
  </a>
</div>

<div class="vid-imgs">
  <span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
  <span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
  <span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
</div>

Basically, each span that is in the vid-imgs class with the data-item would match to the ID of the parent divs and then do an .append() right after the item-title class.

So the intended output would be something like this:

<div id="id-expand-2">
  <a class="thing" href="#">
    <div class="item-title">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
      <span>Title 1</span>
    </div>
  </a>
</div>
<div id="id-expand-4">
  <a class="thing" href="#">
    <div class="item-title">
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
      <span>Title 2</span>
    </div>
  </a>
</div>
<div id="id-expand-6">
  <a class="thing" href="#">
    <div class="item-title">
 <span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
      <span>Title 3</span>
    </div>
  </a>
</div>

I'm not sure how to match each of those overall.

I was thinking of using each like this:

$(".vid-imgs").each(function () {
  var items = $(".item").attr("data-item");
  console.log(items);
});

But that only seems to grab the first item in the vid-imgs div. I feel like I've done this before, but I've been starting at this thing all day, and I think I need to give my eyes a break.

CodePudding user response：

Few things:

$(".item").attr("data-item"); is getting the value of the data-item attribute of the .item. If you want to select the item with a specific id, you can use the CSS id selector
You should be looping through the spans inside .vid-imgs, not .vid-imgs itself

$(".vid-imgs span").each(function () {
  var items = $("div#" $(this).data('item'))
  items.append(this.cloneNode(true))
  this.remove() //remove the span
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id-expand-2">
  <a class="thing" href="#">
    <div class="item-title">
      <span>Title 1</span>
    </div>
  </a>
</div>
<div id="id-expand-4">
  <a class="thing" href="#">
    <div class="item-title">
      <span>Title 2</span>
    </div>
  </a>
</div>
<div id="id-expand-6">
  <a class="thing" href="#">
    <div class="item-title">
      <span>Title 3</span>
    </div>
  </a>
</div>

<div class="vid-imgs">
  <span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
  <span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
  <span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
</div>