0

I have 2 Caldera forms on a single page and I have this snippet of jQuery used to manipulate some of the markup.

$('.ss-form-fields').prependTo('.caldera_forms_form');

The problem is that both forms have the .ss-form-fields element and the result is that I'm getting elements duplicated.

So I tried this;

$(".caldera-grid").each(function(){
$('.ss-form-fields').prependTo('.caldera_forms_form');
});

.caldera-grid being a class at the top of the form markup.

Should this have worked (because it didn't) or am I doing it all wrong?

EDIT

The purpose of the .prependTo was to bring the .ss-form-fields to the top of the markup so that I could use child selectors in css as I couldn't get them to work otherwise. Without the prepend the markup looked like this;

enter image description here

With the prepend I could make the markup look like this;

enter image description here

If there is a better way of achieving a similar result i would love to hear about it.

Briany Hearne
  • 73
  • 7
  • 1
    Please also share relevant HTML code also to provide better solutions to this. – palaѕн Apr 08 '20 at 18:05
  • Semi-related; https://stackoverflow.com/questions/59887834/getting-the-value-of-the-input-field-using-jquery/59888053#59888053 <= answer covers using contextual lookups for dom manipulations. Both of your prependTo statements are executing in the global scope. – Taplar Apr 08 '20 at 18:08
  • Are you really wanting $('.caldera-grid .ss-form-fields').prependTo('.caldera_forms_form'); – fkantner Apr 08 '20 at 18:09

1 Answers1

0

It works like intended if you do it this way:

$(".caldera-grid").each(function(){
   let fields = $(this).find('.ss-form-fields')
   $(this).find('.caldera_forms_form').prepend(fields);
});

Working Fiddle with the relevant structure of your page.

matthias_h
  • 11,356
  • 9
  • 22
  • 40