Clone Object Only Once Per Div

Hi all, I am relatively new to jQuery and am struggling with the clone() function.

I have a WordPress blog and am simply trying to take the .post content (the year of the wine in this case) and append it to the .entry-title of the article.

I have clone working! However…it’s appending the .post-content of all of the blogs to each of the .entry-title divs.

How can I tell jQuery I only want to append the .post-content to the .entry-title within that specific article?

Here’s where I am working on this for reference: https://elysabeth.wpengine.com/our-kitchen/
The border currently around it is just to show where the .entry-title div is to make sure the .post-content is appending properly within the title, vs outside of it.

Thank you for your assistance!

HTML

    /* Articles */
    <h2 class="entry-title">
        <a href="">Wine Title</a>
        <div class="post-content">Year</div>
    </h2>

    /* Articles */
    <h2 class="entry-title">
        <a href="">Wine Title</a>
        <div class="post-content">Year</div>
    </h2>

jQuery

    /* Clone and Append .post-content to .entry-title */
    var $filters = $('.post-content');
 
    $(".et_pb_post").each(function() {
        $(this).each(function() { 
            $filters.clone().appendTo('.entry-title');
            $filters.remove();
        });
    });

Hi @birdiegolden, if I understand the issue correctly you have to query for the .post-content within the each() loop in the context of each .et_pb_post element, rather than globally – i.e.

$('.et_pb_post').each(function () {
  var $filters = $('.post-content', this)
  $filters.clone().appendTo('.entry-title')
  $filters.remove()
})

BTW the inner each() is redundant, and instead of first clone()ing and then remove()ing the filter you might actually append it directly:

$('.et_pb_post').each(function () {
  var $filters = $('.post-content', this)
  $filters.appendTo('.entry-title')
})

That said, is there a specific reason not to render the year into the title on the backend from the first?

1 Like

That is accurate! However, what I’m struggling with is applying the clone within the appropriate parent container.

I’ve added your code (thank you btw for the tips!) but it appears to still apply the clone within other div articles too. https://elysabeth.wpengine.com/our-kitchen/

Thank you for looking into this!

As for modifying the markup directly - Unfortunately, this code I’m trying to wrap is within a DIVI core includes module - and from what the builder developers said, this is not something they would recommend directly editing, and adding it to a child theme was also not recommended because it’s a core module. :confused:

Hey, sorry for the late reply… well that link still seems to use the old version. Could you provide a small self-contained example on codepen or something to get WP out of the equation? It’s also a bit hard to tell which elements belong where as all years are the same on that page…

Hm… that sound’s strange, but yes I understand that you don’t want to fork a child theme.

My sincerest apologies - I realize now that my html markup shows how I would like the output to be vs what it is and why this issue is happening.

I’ve put together a pen here with your updated code.

As you can see, the issue is that the year is being cloned, but it’s cloning and appending every year from all the articles into each article.

Thank you again for your help on this!

Ah thx for the pen – yes this was indeed a misunderstanding then. So if the related content is the sibling rather than a child, you can get it using next() like so:

$('.et_pb_post > .entry-title').each(function () {   
  $(this)
    .next('.post-content')
    .clone()
    .appendTo(this)
})

PS: Here’s an updated pen.

1 Like

You’re a genius! Thank you kindly for your help. I haven’t used next() before so that’s great to learn.

Appreciate your patience and time :smiley:

1 Like

Glad I could help! :-)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.