How do I append multiple children to multiple parents?

Question

0.00/5 (No votes)

See more:

I have multiple parent and child elements served with two separate loops on the backend and I need to append the children to parent elements in sequential order. To illustrate my situation:

Parent
Parent
Parent

Child
Child
Child

What I am trying to achieve:

Parent
  - Child
Parent
  - Child
Parent
  - Child

All of the children share class

to-be-moved

and all parents share class

wine-gallery-wrap

. Unfortunately I cannot add any unique identifiers to any of the elements.

What I have tried:

This is what I tried but my JS knowledge doesn't allow me to make it work:

JavaScript

const moveItems = document.querySelectorAll('.to-be-moved');
 moveItems.forEach( function(move) {
    document.getElementsByClassName('wine-gallery-wrap').appendChild(move);
 });

Please help!

Posted 23-Dec-20 8:22am

Philipp Soldunov

Updated 24-Dec-20 5:57am

Add a Solution

3 solutions

Solution 1

You didn't explain why you couldn't give any sort if unique identifier to your target elements but let's assume you are correct. You have only one possible route and that is one that relies upon you getting your element in precise order at all times.

If that's the case, you can use the array returned from getElementByClassName() and sequentially append to each items as your iterate through the return list.

However, and this may sound a bit cynical, but that is not the intent:

If you cannot put any sort of unique identifier for the objects than what difference does it make which child goes to which parent? If they are in no way unique then you have defined that scenario.

If, on the other hand, you are doing this because you are creating the parent/child sets dynamically then you can create unique identifiers by serializing them at creation and keeping the parents and children synchronized.

A massive amount of the work done (using my javascript/php/html) where I currently work is all dynamically generated and uses this serialization. Most of the time it's pretty straight forward - sometimes you need a little imagination. Keeping things in precise order is key to much of it!

Posted 24-Dec-20 5:52am

W∴ Balboos, GHB

Comments

Philipp Soldunov 24-Dec-20 12:00pm

Well the thing is that those elements are generated by Webflow's CMS and I have no access to it. So best I could do is to manipulate the output of CMS with my custom Javascript. Each parent element and each child element are related in sequential order. So first child has to go to first parent, second to second and so on. Otherwise whole functionality that I was trying to achieve would break.

Philipp Soldunov 24-Dec-20 12:02pm

You can see the thing here - https://garconwines-master.webflow.io/. I already figured it out, you can see my solution at the bottom. Anyway, the child elements in this instance are rows of thumbnails below main image.

W∴ Balboos, GHB 24-Dec-20 12:05pm

One problem is using a framework - and now you exchange some ease, up front, for a loss of true flexibility and control. That's your choice.

The solution you posed is, essentially what my second paragraph says: use the returned array and index through it adding items that are correlated via the index.

Philipp Soldunov 24-Dec-20 12:08pm

Yes Webflow has a ton of limitations, but it's my bread and butter these days. Furthermore I enjoy finding solutions to my more extreme ideas.

Solution 2

I think you should process the "parent" first; then retrieve the child at the same index / offset; e.g. get first parent (index 0), get child at 0; next parent (+1), etc.

It also works child first but seems less intuitive. And it's not a "multiple to multiple" as you imply; it's just single to single.

Posted 24-Dec-20 5:53am

Gerry Schmitz

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Philipp Soldunov · Accepted Answer · 2020-12-24T05:57:00

Solution 3

This bit of code helped me:

JavaScript

const moveItems = document.querySelectorAll('.to-be-moved');
let targetElements = document.querySelectorAll('.wine-gallery-wrap');
 
 for (let i = 0; i < targetElements.length; i++) {
       targetElements[i].appendChild(moveItems[i]);
 }

Posted 24-Dec-20 5:57am

Philipp Soldunov

Updated 24-Dec-20 6:02am

v2