wyc
wyc

Reputation: 55273

Moving an element with InsertAfter, but only insert it the parent of the elements?

I did the following:

  jQuery('.businessdirectory-category .wpbdp-rating-info').insertAfter('.businessdirectory-category .title');

To move .wpbdp-rating-info after .title. But there are 3 .wpbdp-rating-info in the page so now each .businessdirectory-category has 3 .wpbdp-rating-info

How can I do it so that each .businessdirectory-category only has its own .wpbdp-rating-infoappended to its own.title`?

EDIT:

enter image description here

I changed it to this:

 jQuery('.wpbdp-listing-excerpt .wpbdp-rating-info').each(function () {
    var $this = jQuery(this);
    $this.insertAfter($this.closest('.wpbdp-listing-excerpt').find('.title'));
  });

But didn't work either.

Upvotes: 0

Views: 762

Answers (1)

James Allardice
James Allardice

Reputation: 165971

You can iterate over the matched set and move each element individually:

jQuery('.businessdirectory-category .wpbdp-rating-info').each(function () {
    var $this = jQuery(this);
    $this.insertAfter($this.closest('.businessdirectory-category').find('.title'));
});

You may be able to simplify the argument to insertAfter, but you'd need to post your markup for me to know for sure. This example assumes that the .title element is not a sibling or ancestor of .businessdirectory-category.

Here's a working example.

Upvotes: 1

Related Questions