Insert items matching data attribute to ID's with jQuery

Question

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

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:

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.

user_14251221 · Answer

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
});

Insert items matching data attribute to ID's with jQuery

1 Answers