Within Each Parent div, Take an element located in a child div and append it to a different child div

Last updated on June 29th, 2023 at 05:16 am

I’ve got a few divs on a page which consist of Car details; I need to take “add to cart ” button located within div.list-item-content__button-wrapper and append it to the Title container div (div.list-item-content__title).Simply I need all “add to cart ” buttons under Title of every parent div.
 

/*<div class=”list-item-content”>
<div class=”list-item-content__text-wrapper”> 
TITLE <div class=”list-item-content__title”>Car interior</div>
</div><hr>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


<div class=”list-item-content__button-wrapper”>
<button name=”favorite”>

  Add To cart 
</button>
</div>
</div> 
 
<div class=”list-item-content”> 
<div class=”list-item-content__text-wrapper”>
TITLE<div class=”list-item-content__title”>Car interior</div>
</div><hr>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<div class=”list-item-content__button-wrapper”> 
<button name=”favorite”> 

  Add To cart
</button> 
</div>
</div>*/

TITLE

Car interior


What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Add To cart

TITLE

Car interior


What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Add To cart



1. .find() Method: This method is used to get all the filtered descendants of each element in the current set of matched elements.

2. .closest() Method: This method is used to get the first ancestor of the selected element. The ancestors can be parents, grand-parent, great-grandparents, etc.

3. The .append() method: inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()

So Following is result after using .closest(), .find() , .append in jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
         

$(function() { 
  $('div.list-item-content div.list-item-content__title').each(function() {
   $(this).append($(this).closest('div.list-item-content').find('div.list-item-content__button-wrapper'));
  });
});
</script>

TITLE

Car interior

Add To cart


What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

TITLE

Car interior

Add To cart


What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Share Post

22 thoughts on “Within Each Parent div, Take an element located in a child div and append it to a different child div”

  1. My coder is trying to convince me to move to .net from PHP.

    I have always disliked the idea because of the costs. But
    he’s tryiong none the less. I’ve been using Movable-type on a variety of websites for about a year and am worried about switching to another platform.
    I have heard great things about blogengine.net. Is there a way
    I can import all my wordpress content into it?
    Any help would be really appreciated!

  2. Hi there, I found your web site via Google at the same time as searching for a similar matter,
    your site got here up, it seems good. I’ve bookmarked it in my google bookmarks.

    Hello there, just was alert to your weblog thru Google, and found that it’s truly informative.
    I am gonna watch out for brussels. I will be grateful in case you continue this in future.
    Numerous other folks might be benefited out of your writing.
    Cheers!

  3. Thanx for the effort, keep up the good work Great work, I am going to start a small Blog Engine course work using your site I hope you enjoy blogging with the popular BlogEngine.net.Thethoughts you express are really awesome. Hope you will right some more posts.

  4. Hi there! I could have sworn I’ve visited this blog before but
    after looking at many of the articles I realized it’s new to me.
    Nonetheless, I’m definitely delighted I came across it and I’ll be bookmarking it and checking back often!

  5. Добро пожаловать в Jetton Casino – ваш личный мир развлечений и крупных
    выигрышей. В нашем казино вас ждут топовые игровые автоматы,
    рулетка, покер и эксклюзивные
    акции. Присоединяйтесь и получайте бонусы для успешного старта.

    В чем преимущества игры в Jetton сайт?
    Здесь вас ждут выгодные предложения, высокий уровень безопасности и честная игра.
    Еженедельные турниры, программы лояльности и персональные подарки
    делают игру еще интереснее. Гарантируем быстрые выплаты,
    надежные способы пополнения счета и поддержку 24/7.

    Популярные игры от ведущих разработчиков.

    Персональные предложения и приятные сюрпризы.

    Быстрое пополнение счета и моментальный вывод выигрышей.

    Конкурсы для азартных игроков с ценными наградами.

    Испытайте удачу в Jetton Casino и станьте частью элитного
    клуба победителей. https://jetton-casinochampion.makeup/

  6. Hello there, There’s no doubt that your web site may be having web browser
    compatibility problems. When I take a look at your website in Safari, it looks fine however when opening in Internet Explorer, it has some overlapping issues.
    I merely wanted to provide you with a quick heads up! Other than that, excellent site!

  7. Simply want to say your article is as astounding.
    The clarity in your publish is just excellent and that i can assume you are an expert in this
    subject. Fine together with your permission let me to grasp your feed to keep
    updated with approaching post. Thank you one million and
    please continue the rewarding work.

  8. Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

  9. Great blog you have here but I was wondering if you knew of any message boards that cover the same topics discussed in this article? I’d really like to be a part of community where I can get feedback from other experienced people that share the same interest. If you have any recommendations, please let me know. Bless you!

Leave a comment